a 标签中 title 属性样式修改

无文字描述,直接上测试页,看效果。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4 <style>
 5     #tplink{border:1px solid red; background:#FF6;
 6         position:absolute;
 7         padding:1px;
 8         color:red;
 9         display:none;
10         border-radius: 3px;
11     }
12 </style>
13 <script type="text/javascript" src="jqueryv1.8.3jquery.min.js"></script>
14 <script type="text/javascript">
15     $(function(){
16         var x=-210;
17         var y=-160;
18         $("a.tplink").mouseover(function(e){
19             this.myTitle=this.title;
20             this.title="";
21             var tooltip="<div id='tplink'>"+this.myTitle+"</div>";   //创建DIV元素
22             $("#link").append(tooltip);     //追加到文档中
23             $("#tplink").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show();    //设置X  Y坐标, 并且显示
24         }).mouseout(function(){
25             this.title=this.myTitle;
26             $("#tplink").remove();    //移除
27         }).mousemove(function(e){
28             $("#tplink").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});
29         })
30     })
31 </script>
32 <title>超链接title样式修改</title>
33 </head>
34 
35 <body>
36 <div id="link">
37     <p><a href="#" class="tplink" title="自定义title">自定义title</a></p>
38     <p><a href="#" title="默认title">默认title</a></p>
39 </div>
40 </body>
41 </html>

效果图:

原文地址:https://www.cnblogs.com/chinda/p/6877889.html