jQuery的offset()实现鼠标悬停即弹出Tips

来源:互联网 时间:1970-01-01

jQuery的Tips插件很多,使用jQuery的offset()定位也可以实现一个简单的Tips,下面我来给各位介绍jQuery的offset()实现鼠标悬停即弹出Tips实例,大家可参考。

1.创建一个div,鼠标悬停即弹出Tips

 代码如下 复制代码

<div>鼠标悬停时弹出Tips</div>

2.使用js给div绑定鼠标悬浮事件

 代码如下 复制代码

$(“.tips”).unbind().hover(

function(event) {

event.stopPropagation();

//获取div的位置

var offset = $(this).offset();

//创建弹出浮层,定位在div的位置

var tips = $( ‘<div></div>’ ).css(“top”,offset.top).css(“left”,offset.left);

//弹出浮层

$(this).append(tips).find(“.popTips”).fadeIn(10);

},

function() {

this.title = this.t;

$(“.popTips”).fadeOut(“slow”).remove();//隐藏浮层

}

);

3.给浮层加上样式.popTips {
font-size: 12px;
left: 0;
line-height: 180%;
margin: 5px;
position: absolute;
width: 200px;
z-index: 9999;
}

注意position: absolute;




相关阅读:
Top