模拟实现链接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