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、然后就可以了。
1、添加如下图片代码，此时是既没有加Alt标签又没有加Title标签的。
2、页面的图片就可以显示出来了。鼠标放图片上，也不会显示出字。如图所示。
3、加上Alt标签和Title标签。写上alt="图片显示不了显示alt标签" title="鼠标放上去显示" 如图所示的文字。
4、将鼠标放在图片上，就可以显示出title标签上的字了，而alt标签上的字是显示不出来的。
5、当图片发生错误或是不存在时，这里是将原图片名“图片1”改为“图片11”，其它不变。原图片就不存在显示不出来了，如图所示。
6、同样将鼠标放在图片上，就可以看到图片无法显示，而是看到了alt标签上的字了。
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属性可以实现
如果有帮到你请采纳
|
广告 您可能关注的内容 |
