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;

时间: 2024-09-13 18:17:13

jQuery的offset()实现鼠标悬停即弹出Tips的相关文章

jQuery实现鼠标点击弹出渐变层的方法_jquery

弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下 在弹出层中下面是核心代码 <script type="text/javascript"> // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.s

jQuery实现的感应鼠标悬停图片色彩渐显效果

 这篇文章主要介绍了jQuery实现的感应鼠标悬停图片色彩渐显效果,涉及jQuery中hover.find.css等方法的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

eclipse设置鼠标在错误处悬停时弹出更正提示

问题描述 eclipse设置鼠标在错误处悬停时弹出更正提示 eclipse如何设置鼠标在错误处悬停时弹出更正提示,就是相当于按ctrl+1 的功能,以前是会自动弹出提示的,现在不知道为什么不可以了

jQuery实现的鼠标滑过弹出放大图片特效_jquery

本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等, 我们先来看个演示图 下面是代码实例: <link rel="stylesheet" href="../css/common.css" type="text/css" /> <script type="text/javascript" src="../

jQuery鼠标悬浮链接弹出跟随图片实例代码_javascript技巧

本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body{ margin:0;

使用jquery实现鼠标滑过弹出更多相关信息层附源码下载_jquery

当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

jquery实现隐藏在左侧的弹性弹出菜单效果_jquery

本文实例讲述了jquery实现隐藏在左侧的弹性弹出菜单效果.分享给大家供大家参考.具体如下: 这是一款隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JavaScript缓冲动画的典型教程.本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内容是在一段Div内,怎么布置就看你的了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-hidden-alert-adv-codes/

jquery实现可自动判断位置的弹出层效果代码_jquery

本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)_jquery

本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码.分享给大家供大家参考.具体如下: 这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了jQuery,又想了想,加入点动画效果不知怎么样,后来就写出了这么一个弹出的网页层效果,你点击按钮后就可以看到一个渐出的可关闭的弹出层,点击关闭后,当然也是渐渐的消失的,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明. 运行效果截图如下: 在线演示地址如下: http://demo.jb51