站长之家推出“鼠标悬停图片显示文字”效果的实现

当前位置：网站首页 >> 网站技术 >>

	<center>站长之家推出“鼠标悬停图片显示文字”效果的实现</center><br/><br/>
	<center>
	  【发布人：站长之家    发布日期：2015-04-07】
	</center><br/>
	<p>本文介绍一下“鼠标悬停图片显示文字”效果的实现，很多网站对于图片都使用了特殊效果，本文介绍一下利用DIV+CSS技术在鼠标悬停到图片上图片下方显示链接文字的效果，并给出实际测试过的实例来加以说明。各位站长们可以通过DIV+CSS技术来实现，实现的效果如下图所示。下图中的图一为网站上的图片，图二为当鼠标悬停在图片上时，图片下方显示出“欢迎您访问站长之家网站(www.zzdj.net)”的文字，文字加有超级链接，点击链接可以转向链接的网站地址。</p>
	<p align="center"><img src="http://www.zzdj.net/images/xttpxswz.jpg" width="600" height="246" alt="鼠标悬停图片显示文字效果实例图片一"/></p>
	<p>下面利用DIV+CSS技术制作和测试了这种“鼠标悬停图片显示文字”的代码，各位站长们也可以在自己的网站上实现这种效果。下面是实例代码在下面列出来，可供各位站长们参考。各位站长们也可以根据代码进行修改，从而在您的网站上实现更佳的效果出来。该代码在多个浏览器如IE、Chrome、360浏览器上都能正常测试通过，各位站长们可以直接参考使用，甚至将代码直接运用到自己的网站上：</p>
	<p>
	  &#34;http://www.w3.org/TR/html4/loose.dtd&#34;&gt;<br/>
	  <br/>
	  <br/>
	  <br/>
    <title>推出“鼠标悬停图片显示文字”效果的实现</title></p>

	<p><br/>
	</p>

	<p><br/>
	</p>
	<p>本实例代码显示的结果如上面图中图二所示。</p>
<br/>