鼠标悬浮超链接时,title会定位在某一个位置,有没有感觉很僵硬?
一段简单的代码,控制全局超链接的title属性跟随鼠标移动。
如果超链接没有title属性、或者title属性为空,将不会显示。
不需要修改HTML文件,只需要在CSS文件以及JS文件里面加入一段代码。
CSS代码:
#tooltip{ display: none; height: 24px; padding: 0 9px 0 6px; border: 1px solid #9BC5D7; border-radius: 5px; background: rgba(255,255,255,.75); position: absolute; z-index: 99999; line-height: 23px; font-size: 14px; color: #333; }
JS代码:(先引入Jquery文件)
$(function(){ var x = 10; var y = 20; $("a").mouseover(function(e){ if(this.title!=""){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>"+this.myTitle+"<\/div>"; $("body").append(tooltip); $("#tooltip").css({"top": (e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast"); $(this).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); }) $(this).mousemove(function(e){ $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}); }); } }) })