Rumah > Artikel > hujung hadapan web > css如何设置鼠标放上图片出现文字
css如何设置鼠标放上图片出现文字
- WBOYasal
- 2021-11-15 18:00:4317130semak imbas
css设置鼠标放上图片出现文字的方法：1、给文字元素添加“display:none;”样式使其隐藏；2、使用“父元素:hover 文字元素{display:block;}”语句实现鼠标放在图片上显示文字的效果。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css设置鼠标放上图片出现文字的方法
1、使用dc6dce4a544fdca2df29d5ac0ea9906b和45a2772a6b6107b401db3c9b82c049c2定义将在图片上要出现的文字，可以通过 dc6dce4a544fdca2df29d5ac0ea9906b 和 45a2772a6b6107b401db3c9b82c049c2 将 HTML 元素组合起来。
代码如下：
<div> <span>这是要在图片上出现的文字</span> </div>
2、给div元素添加背景图片，并且设置大小；给文本元素span添加“display:none;”样式使其不显示，代码如下：
background-image:url(图片名称); width:250px; height:100px; background-position:center;
display:none; text-decoration:none;
3、使用hover选择器使鼠标放上图片时，文字出现，代码如下;
<!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>输出结果，当鼠标不在图片上时：
当鼠标在图片上时：
更多编程相关知识，请访问：编程视频！！
Atas ialah kandungan terperinci css如何设置鼠标放上图片出现文字. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css怎样设置单词内字母的间距Artikel seterusnya：19个CSS唯美的边框，让你的项目大放异彩！