代码描述:jQuery模拟超链接title。jQuery模拟超链接title源码实例
超链接自带的title功能的美观去确实不敢恭维,只要用户稍稍挑剔一点,一般不会对他满意,所以要模拟实现此效果,本章节就是一个这样的代码实例,当然这个例子也不够美观,因为只是做一下演示而已,在实际应用中可以自行美化即可。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } p{ clear:both; margin:0; padding:.5em 0; } #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\\/div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px"} ).show("fast") }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); }).mousemove(function(e){ $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }); }); }) </script> </head> <body> <p><a href="#" class="tooltip" title="链接提示一">51前端一</a></p> <p><a href="#" class="tooltip" title="链接提示二">51前端二</a></p> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能