首页 > 代码库 > a 标签中 title 属性样式修改
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="http://www.mamicode.com/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="http://www.mamicode.com/#" class="tplink" title="自定义title">自定义title</a></p>38 <p><a href="http://www.mamicode.com/#" title="默认title">默认title</a></p>39 </div>40 </body>41 </html>
效果图：
a 标签中 title 属性样式修改
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。