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

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



	<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/>