JQuery

1个成员

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

发表于 2017-01-02 4143 次查看
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;

发表回复
你还没有登录,请先登录注册