欢迎你来到站长之家！
本文介绍一下“鼠标悬停图片显示文字”效果的实现，很多网站对于图片都使用了特殊效果，本文介绍一下利用DIV+CSS技术在鼠标悬停到图片上图片下方显示链接文字的效果，并给出实际测试过的实例来加以说明。各位站长们可以通过DIV+CSS技术来实现，实现的效果如下图所示。下图中的图一为网站上的图片，图二为当鼠标悬停在图片上时，图片下方显示出“欢迎您访问站长之家网站(www.zzdj.net)”的文字，文字加有超级链接，点击链接可以转向链接的网站地址。
下面利用DIV+CSS技术制作和测试了这种“鼠标悬停图片显示文字”的代码，各位站长们也可以在自己的网站上实现这种效果。下面是实例代码在下面列出来，可供各位站长们参考。各位站长们也可以根据代码进行修改，从而在您的网站上实现更佳的效果出来。该代码在多个浏览器如IE、Chrome、360浏览器上都能正常测试通过，各位站长们可以直接参考使用，甚至将代码直接运用到自己的网站上：
<!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=gb2312">
<title>推出“鼠标悬停图片显示文字”效果的实现</title>
<style type="text/css">
.zzdjcss{ position:relative;width:429px; height:300px; margin:0 auto; background:url(exam.jpg) no-repeat;}
.zzdjcss span{display:none;}
.zzdjcss:hover span{ display:block; position:absolute; bottom:0; left:0; width:429px; z-index:10; height:50px; line-height:50px; background:#000; filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
.zzdjcss:hover span a{cursor:pointer; color:#FFF; display:block; text-decoration:none; text-align:center;}
</style>
</head>
<body>
<div class="zzdjcss">
<span><a href="http://www.zzdj.net/" target="_blank">欢迎您访问站长之家网站(www.zzdj.net)</a></span>
</div>
</body>
</html>
本实例代码显示的结果如上面图中图二所示。
（本页地址为：http://www.zzdj.net/tech/tech-14.html，请尊重别人的劳动，不要复制和采集。转载请注明本文出处）
