Home > Article > Web Front-end > How to set the text in css when the mouse is placed on the image
How to set the text in css when the mouse is placed on the image
- WBOYOriginal
- 2021-11-15 18:00:4317188browse
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.
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
The code is as follows:
<div> <span>这是要在图片上出现的文字</span> </div>
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;
display:none; text-decoration:none;
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>Output the result when the mouse is not on the picture:
When the mouse is on the picture:
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!