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原生对象常用方法总结(推荐)
May 13 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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新手上路(四)
2006/10/09 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php自定义分页类完整实例
2015/12/25 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
Python读写unicode文件的方法
2015/07/10 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python绘制随机网络图形示例
2019/11/21 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Python实现粒子群算法的示例
2021/02/14 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
行政文员实习自我鉴定范文
2014/09/14 职场文书
资金申请报告范文
2015/05/14 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技