a 标签中 title 属性样式修改
Posted Chinda
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="jquery\\v1.8.3\\jquery.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>
效果图：
以上是关于a 标签中 title 属性样式修改的主要内容，如果未能解决你的问题，请参考以下文章