div+css 鼠标移到图片上显示文字内容? 10
1、首先输入:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title>
<style>
img{border:0}/* css 注释说明:设置图片边框为0 */
body{behavior:url("csshover.htc");text-align:center;}/* css注释说明:兼容ie6 支持标签使用hover */
2、然后输入:
.divcss5{ position:relative;width:554px; height:346px;margin:0 auto}
.divcss5 a,.divcss5 span{display:none; text-decoration:none}
.divcss5:hover{cursor:pointer}
.divcss5:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;
z-index:100; left:0; display:block;}
.divcss5:hover span{ display:block;position:absolute; bottom:0; left:0;color:#FFF;width:554px;
z-index:10;height:36px; line-height:36px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 设置显示文字定位位置,背景半透明 */
3、然后输入:
</style>
</head>
<body>
<div class="divcss5" style="background:url(imgexp.png)">
<span>文字内容</span>
<a href="#" class="now"> </a>
</div>
<div class="divcss5" style="background:url(imgexp.png)">
<span>欢迎访问DIVCSS5网站</span>
<a href="http://www.divcss5.com/" class="now"> </a>
</div>
</body>
</html>
4、然后就可以了。
div+css 鼠标移到图片上显示文字内容代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="本代码由捷西网络提供">
<title>div+css 鼠标移到图片上显示文字内容</title>
<style type="text/css">
.pic{
width:750px;
height:340px;
background: url(
) no-repeat;
}
.text{
padding:30px;
width:690px;
height:280px;
line-height:36px;
background:#FFF;
opacity:0;
}
.pic:hover .text {
opacity:0.6;
text-align:justify;
color:#000000;
font-size:36px;
font-weight:700;
font-family:"Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div class="pic">
<div class="text">
本代码由捷西网络提供!<br><br>
需要更多访问捷西网络官网了解更多!
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>景安网络</title>
</head>
<body>
<a href="http://host.zzidc.com/"><img src="new_a_logo.gif" title="景安网络"></a>
</body>
</html>
可以使用title属性来显示图片的文字内容
<img title="文字说明" src="图片路径">
不需要CSS本身的img标签就有title属性可以实现
如果有帮到你请采纳