php鼠标跟随特效,jquery仿title跟随鼠标提示效果

*{margin:0;padding:0;}

ul li{ list-style:none;}

img {border:0 none;}

body {padding:100px;}

input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;}

.tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 0 3px rgba(000,000,000,0.8);background:rgba(247,245,209,0.5);padding:3px;color:#333;display:none;}/* border-radius，box-shadow ie9以下都不兼容 */

$(document).ready(function() {

var x=10;

var y=20;

$(".link").mouseover(function(e){

//alert(e.pageX);

if(typeof($(this).attr('title'))!='undefined'){ // 判断标签中是否有定义title属性

this.my_tit=this.title;

this.title='';

var tooltip="

"+this.my_tit+"

";

$("body").append(tooltip);

$(".tooltip").css({

display:'block',

left: e.pageX+x,

top: e.pageY+y

})

};

}).mouseout(function(){

if(typeof($(this).attr('title'))!='undefined'){

this.title=this.my_tit;

$(".tooltip").remove();

};

}).mousemove(function(e){// 鼠标移动时跟随

$(".tooltip").css({

left: e.pageX+x,

top: e.pageY+y

})

})

});

自定义链接提示

默认title提示

自定义链接提示

默认title提示