a 标签中 title 属性样式修改
2017-05-19 13:24
405 查看
无文字描述,直接上测试页,看效果。
效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> #tplink{border:1px solid red; background:#FF6; position:absolute; padding:1px; color:red; display:none; border-radius: 3px; } </style> <script type="text/javascript" src="jquery\v1.8.3\jquery.min.js"></script> <script type="text/javascript"> $(function(){ var x=-210; var y=-160; $("a.tplink").mouseover(function(e){ this.myTitle=this.title; this.title=""; var tooltip="<div id='tplink'>"+this.myTitle+"</div>"; //创建DIV元素 $("#link").append(tooltip); //追加到文档中 $("#tplink").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show(); //设置X Y坐标, 并且显示 }).mouseout(function(){ this.title=this.myTitle; $("#tplink").remove(); //移除 }).mousemove(function(e){ $("#tplink").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}); }) }) </script> <title>超链接title样式修改</title> </head> <body> <div id="link"> <p><a href="#" class="tplink" title="自定义title">自定义title</a></p> <p><a href="#" title="默认title">默认title</a></p> </div> </body> </html>
效果图:
相关文章推荐
- 【WEB】HTML标签自带属性title样式修改
- input 标签 修改 disabled 属性默认样式(适配安卓 IOS)
- CSS list-style修改列表属性控制li标签样式
- css修改a标签里面的title的样式
- select标签添加multiple属性后,页面呈现的样式发生改变,如何修改
- 动态修改网页Header属性,Title,Meta标签等
- ASP.NET后台动态修改母板页的Title,keywords,description属性
- 前端开发规范(一):img标签:图片IMG标记的alt属性和title属性
- ASP.NET 如何动态修改 title Meta link标签
- ASP.NET 如何动态修改 Header 属性如添加 Meta 标签 keywords description!
- HTML中关于a标签的title属性怪事
- ASP.NET 如何动态修改 Header 属性如添加 Meta 标签 keywords description!
- asp.net后台修改masterpage里面的meta标签属性
- 如何修改DeDe标签Pagelist分页样式详解
- 用JavaScript修改HTML标签属性
- Img标签的Alt属性和A链接标签的title属性
- ASP.NET 如何动态修改 Header 属性如添加 Meta 标签 keywords description!
- a标签的title属性
- img标签中alt和title属性的正确使用
- ASP.NET 如何动态修改 Header 属性如添加 Meta 标签 keywords description!