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中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
javascript数组去重方法分析
Dec 15 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
js操作二进制数据方法
Mar 03 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
sae使用smarty模板的方法
2013/12/17 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
js指定步长实现单方向匀速运动
2017/07/17 Javascript
理解javascript async的用法
2017/08/22 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
Python help()函数用法详解
2014/03/11 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python中cPickle类使用方法详解
2018/08/27 Python
python反转列表的三种方式解析
2019/11/08 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
房地产活动策划方案
2014/05/14 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
部门2014年度工作总结
2014/11/12 职场文书
手术室护士个人总结
2015/02/13 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers