超链接title跟随鼠标移动
加入收藏 2022-08-05 26人浏览

鼠标悬浮超链接时,title会定位在某一个位置,有没有感觉很僵硬?

一段简单的代码,控制全局超链接的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"});
			});
		}
	})
})

添加至收藏