你的位置:首页 > Java教程

[Java教程]模拟实现链接title效果代码实例


模拟实现链接title效果代码实例:

自带的的链接的title属性的效果确实太难看了,对没关效果要求稍高的网站都要进行自定义的title效果,下面就介绍一下jquery如何实现此效果,代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">* { margin:0; padding:0;}body { font-size:12px;}.wrap { width:600px; margin:100px auto;}.clearfix:after,.clearfix:before { display:table; content:"";}.clearfix:after { clear:both; overflow:hidden;}.clearfix { zoom:1;}.list { position:relative;}.list li { list-style:none; width:100px; height:24px; line-height:24px; margin-right:10px; float:left;}.list li a { text-decoration:none; color:#333; display:block;}.show { position:absolute; width:100px; background:#FFFFE1; border:1px solid #ffcc01; padding:6px; display:none; z-index:5; margin-top:10px; margin-left:60px;}.show p { height:18px; line-height:18px;}.list li a:hover { text-decoration:underline; color:#FF0000;}</style><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript"> $(function(){  var $li=$(".wrap").find("li");  $li.bind("mouseover",function(){   $(this).find(".show").show();  }).bind("mouseout",function(){   $(this).find(".show").hide();  }) }) </script></head><body><div class="wrap"> <ul class="list clearfix">  <li><a href="">UI设计师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">前端开发工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">运维工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">研发开发工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">UI设计师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">前端开发工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">运维工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">研发开发工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">UI设计师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">前端开发工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">运维工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li>  <li><a href="">研发开发工程师</a>   <div class="show">    <p>所属部门:技术部</p>    <p>工作地点:郑州</p>    <p>招聘人数:21</p>   </div>  </li> </ul></div></body></html>

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0612/4001.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8285