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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
js如何打印object对象
Oct 16 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
iview实现图片上传功能
2020/06/29 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python字典key不能是可以是啥类型
2020/08/04 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
中学老师的自我评价
2013/11/07 职场文书
工作失职检讨书范文
2014/01/16 职场文书
C++程序员求职信
2014/05/07 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers