Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击


Posted in Javascript onFebruary 12, 2014

实例如下所示:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>
    <script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ps = $("#div_pro").position();
            $("#float_box").css("position", "absolute");
            $("#float_box").css("left", ps.left + 20); //距离左边距
            $("#float_box").css("top", ps.top + 20); //距离上边距
            $("#div_pro").mouseenter(function () {
                $("#float_box").show();
            });
            $("#float_box").mouseleave(function () {
                $("#float_box").hide();
            });
        })
    </script>
</head>
<body>
    <div>
        <a href="#" id="div_pro">广东省</a>
    </div>
    <div id="float_box" style="display:none;">
        <a href="#">深圳市</a>    
        <a href="#">广州市</a>
        <a href="#">东莞市</a>
    </div>
</body>
</html>
Javascript 相关文章推荐
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
jquery实现网页查找功能示例分享
Feb 12 #Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 #Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 #Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 #Javascript
jquery ajax,ashx,json的用法总结
Feb 12 #Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 #Javascript
You might like
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python深入学习之内存管理
2014/08/31 Python
Python的动态重新封装的教程
2015/04/11 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Django用户认证系统 User对象解析
2019/08/02 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
python在不同条件下的输入与输出
2020/02/13 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
房地产财务管理制度
2014/02/02 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
2014年计生工作总结
2014/11/21 职场文书
英语演讲开场白
2015/05/29 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers