超链接提示效果jQuery+CSS+html
我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了.
1 <a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a>
然而这个提示效果的响应速度是挺缓慢的.考虑到良好的用户体验, 需要的是当鼠标移动到超链接的那一瞬间就出现提示. 这时就需要移除<a>标签title的提示效果.
实现这个效果具体思路如下:
a.当鼠标滑入超链接.=====mouseover事件
b.创建一个<div>元素, <div>元素内容为title属性的值. ======append追加内容
c.为它设置 x 坐标和 y坐标, 使其显示在鼠标位置的旁边.======绝对定位 e.pageY e.pageX
d.当鼠标划出超链接, 移除<div>元素.======remove
代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 body{margin:0;padding:40px;background-color:#FFF;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;} 8 p{clear:both;margin:0;padding:.5em 0;} 9 #tooltip{position:absolute;border:1px solid #333;background-color:#F7F5D1;padding:1px;color:#333;display:none;} 10 </style> 11 </head> 12 <body> 13 <p><a href="#" class="tooltip" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a></p> 14 <p><a href="#" class="tooltip" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a></p> 15 <p><a href="#" class="tooltip" title="陈红母亲股权变更签名鉴定为假 涉提交虚假材料">陈红母亲股权变更签名鉴定为假 涉提交虚假材料</a></p> 16 <p><a href="#" class="tooltip" title="两女子因问路未获回应围殴保洁员(图)">两女子因问路未获回应围殴保洁员(图)</a></p> 17 <hr>下面浏览器自带超链接title提示<hr> 18 <p><a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a><p> 19 <p><a href="#" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a><p> 20 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 21 <script type="text/javascript"> 22 (function($){ 23 //自制提示和鼠标距离太近,有时候会引起无法提示的问题,需要重新设置提示元素的 top 和 left 值. 24 var x = 10; 25 var y = 20; 26 $("a.tooltip").mouseover(function(e){ 27 //显示title 28 this.myTitle = this.title; 29 this.title = ""; 30 var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>";//创建<div>元素 31 $("body").append(tooltip);//把div追加到文档中 32 $("#tooltip") 33 .css({ 34 "top": ( e.pageY + y ) + "px", 35 "left": ( e.pageX + x ) + "px" //设置x坐标和y坐标, 并且显示 36 }).show("fast"); 37 38 }).mouseout(function() { 39 //隐藏title 40 this.title = this.myTitle; 41 $("#tooltip").remove(); 42 }); 43 })(jQuery); 44 </script> 45 </body> 46 </html>
效果如下:
彩色点代表鼠标指针.
此时,鼠标滑入和滑出已经没有问题.当鼠标在超链接上面移动, 提示效果并不会随着鼠标移动. 还需要添加一个mousemove事件.
完整代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 body{margin:0;padding:40px;background-color:#FFF;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;} 8 p{clear:both;margin:0;padding:.5em 0;} 9 #tooltip{position:absolute;border:1px solid #333;background-color:#F7F5D1;padding:1px;color:#333;display:none;} 10 </style> 11 </head> 12 <body> 13 <p><a href="#" class="tooltip" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a></p> 14 <p><a href="#" class="tooltip" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a></p> 15 <p><a href="#" class="tooltip" title="陈红母亲股权变更签名鉴定为假 涉提交虚假材料">陈红母亲股权变更签名鉴定为假 涉提交虚假材料</a></p> 16 <p><a href="#" class="tooltip" title="两女子因问路未获回应围殴保洁员(图)">两女子因问路未获回应围殴保洁员(图)</a></p> 17 <hr>下面浏览器自带超链接title提示<hr> 18 <p><a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里有刀.">吉大砍人案致1死1伤 受害者死前大喊他手里有刀</a><p> 19 <p><a href="#" title="女子隐瞒已婚与他人恋爱 骗财3万余元终获刑">女子隐瞒已婚与他人恋爱 骗财3万余元终获刑</a><p> 20 <script type="text/javascript" src="js/jquery-1-8-3.js"></script> 21 <script type="text/javascript"> 22 (function($){ 23 //自制提示和鼠标距离太近,有时候会引起无法提示的问题,需要重新设置提示元素的 top 和 left 值. 24 var x = 10; 25 var y = 20; 26 $("a.tooltip").mouseover(function(e){ 27 //显示title 28 this.myTitle = this.title; 29 this.title = ""; 30 var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>";//创建<div>元素 31 $("body").append(tooltip);//把div追加到文档中 32 $("#tooltip") 33 .css({ 34 "top": ( e.pageY + y ) + "px", 35 "left": ( e.pageX + x ) + "px" //设置x坐标和y坐标, 并且显示 36 }).show("fast"); 37 38 }).mouseout(function() { 39 //隐藏title 40 this.title = this.myTitle; 41 $("#tooltip").remove(); 42 }).mousemove(function(e){ 43 $("#tooltip").css({ 44 "top": ( e.pageY + y ) + "px", 45 "left": ( e.pageX + x ) + "px" 46 }); 47 }); 48 })(jQuery); 49 </script> 50 </body> 51 </html>
