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 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
js常用代码段整理
2011/11/30 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
javascript解析json实例详解
2014/11/05 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
详解javascript函数的参数
2015/11/10 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python中list循环语句用法实例
2014/11/10 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python操作列表的函数使用代码详解
2017/12/28 Python
pandas实现选取特定索引的行
2018/04/20 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2014年采购员工作总结
2014/11/18 职场文书
公司档案管理制度
2015/08/05 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书