当前位置: 首页 > news >正文

[Jquery] 实现鼠标移到某个对象,在旁边显示层。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

当鼠标移到某个地方的时候,在旁边飘出一个DIV,离开则消失。


是使用了某位大大封装的一个函数,稍微改了下。

原文地址: 当鼠标移动上去显示一个层,在这个对象的旁边,并且可以给这个层添加值

效果如下:


函数代码,放到一个JS文件里:

/** 
 * 鼠标移上去显示层 
 * @param divId 显示的层ID 
 * @returns 
 */  
$.fn.myHoverTip = function(divId) {  
    var div = $("#" + divId); //要浮动在这个元素旁边的层  
    div.css("position", "absolute");//让这个层可以绝对定位  
    var self = $(this); //当前对象  
    self.hover(function() {  
        div.css("display", "block");  
        var p = self.position(); //获取这个元素的left和top  
        var x = p.left + self.width();//获取这个浮动层的left  
        var docWidth = $(document).width();//获取网页的宽  
        if (x > docWidth - div.width() - 20) {  
            x = p.left - div.width();  
        }  
        div.css("left", x);  
        div.css("top", p.top);  
        div.show();  
    },  
    function() {  
        div.css("display", "none");  
    }  
    );  
    return this;  
}



在哪个对象旁边显示DIV,随自己定义,只要定义一个ID即可:

如: <a id="viewReInfo" href="#" >查看收件人回执情况</a>


需要显示的DIV,根据需求自己定义,同样只需定义ID即可:

如:<div id="receiptInfo" class="receiptInfo"></div>


调用上面的JS函数,代码如下:

$('#viewReInfo').myHoverTip('receiptInfo');


完事。哇哈哈,超简单。感谢原作者无私,强大啊!!

转载于:https://my.oschina.net/u/1381491/blog/182892

相关文章:

  • 【转】Navigation Drawer(导航抽屉)
  • python的zipfile模块记录
  • fedora 19 安装mp3 解析
  • sqlplus使用总结
  • 利用sql语句复制一条或多条记录
  • 一次union all 的优化
  • PDF格式详解
  • win7,redhat双系统安装的一点看法。
  • 解决eclipse中egit中的cannot open git-upload-pack问题
  • 二手笔记本测试软件
  • VC 2005 解决方案的目录结构设置和管理
  • ldr和adr在使用标号表达式作为操作数的区别
  • 快速搭建YUM源和yum使用
  • 添加菜单的窗口
  • NodeJS+Node Inspector简单使用
  • 《剑指offer》分解让复杂问题更简单
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • iOS 颜色设置看我就够了
  • Iterator 和 for...of 循环
  • node和express搭建代理服务器(源码)
  • Protobuf3语言指南
  • Redis字符串类型内部编码剖析
  • TypeScript实现数据结构(一)栈,队列,链表
  • vue.js框架原理浅析
  • 给github项目添加CI badge
  • 给Prometheus造假数据的方法
  • 数据仓库的几种建模方法
  • 提醒我喝水chrome插件开发指南
  • 网络应用优化——时延与带宽
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • 主流的CSS水平和垂直居中技术大全
  • 《码出高效》学习笔记与书中错误记录
  • Linux权限管理(week1_day5)--技术流ken
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 如何用纯 CSS 创作一个菱形 loader 动画
  • $GOPATH/go.mod exists but should not goland
  • (C#)获取字符编码的类
  • (附表设计)不是我吹!超级全面的权限系统设计方案面世了
  • (附源码)基于ssm的模具配件账单管理系统 毕业设计 081848
  • (七)c52学习之旅-中断
  • (四)TensorRT | 基于 GPU 端的 Python 推理
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (最优化理论与方法)第二章最优化所需基础知识-第三节:重要凸集举例
  • .net 托管代码与非托管代码
  • .NET3.5下用Lambda简化跨线程访问窗体控件,避免繁复的delegate,Invoke(转)
  • .net的socket示例
  • .NET和.COM和.CN域名区别
  • .Net下使用 Geb.Video.FFMPEG 操作视频文件
  • .NET中两种OCR方式对比
  • .pyc文件是什么?
  • @Autowired多个相同类型bean装配问题
  • [Angular 基础] - 表单:响应式表单
  • [bbk5179]第66集 第7章 - 数据库的维护 03
  • [C#]使用DlibDotNet人脸检测人脸68特征点识别人脸5特征点识别人脸对齐人脸比对FaceMesh
  • [c++] C++多态(虚函数和虚继承)