代码描述:jQuery模拟链接title。jQuery模拟链接title效果源码实例
自带的的链接的title属性的效果确实太难看了,对外观要求稍高的网站都要进行自定义的title效果。 下面就介绍一下jquery如何实现此效果,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>自定义title效果-51前端</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>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能