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;