How to set the text in css when the mouse is placed on the image-CSS Tutorial-php.cn

How to set the text in css when the mouse is placed on the image

WBOY

Release： 2021-11-15 18:00:43

Original

17188 people have browsed it

Css method to set the text to appear when the mouse is placed on the picture: 1. Add the "display:none;" style to the text element to hide it; 2. Use "parent element:hover text element {display:block;} " statement achieves the effect of displaying text when the mouse is placed on the picture.

How to set the text in css when the mouse is placed on the image

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css method to set text to appear when the mouse is placed on an image

1. Use

and to define the text that will appear in the image The text to appear on the HTML element can be combined by

and .

The code is as follows:

<div>
<span>这是要在图片上出现的文字</span>
</div>

Copy after login

2. Add a background image to the div element and set the size; add the "display:none;" style to the text element span so that it does not display. The code is as follows:

background-image:url(图片名称);
width:250px;
height:100px;
background-position:center;

Copy after login

display:none;
text-decoration:none;

Copy after login

3. Use the hover selector to make the text appear when the mouse is placed on the picture. The code is as follows;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css" >
.a{
background-image:url(1115.08.png);
width:250px;
height:100px;
background-position:center;
 }
 .a span{
display:none;
text-decoration:none;}
.a:hover span{
display:block;
position:absolute;
top:0;
left:0;
color:blue;}
</style>
</head>
<body>
<div class="a">
<span>这是一副山水画</span>
</div>
</body>
</html>

Copy after login

Output the result when the mouse is not on the picture:

How to set the text in css when the mouse is placed on the image

When the mouse is on the picture:

How to set the text in css when the mouse is placed on the image

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to set the text in css when the mouse is placed on the image. For more information, please follow other related articles on the PHP Chinese website!