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_13_执行模型详解
Oct 20 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
jQuery异步提交表单实例
May 30 jQuery
微信小程序倒计时功能实现代码
Nov 09 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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封装分页工具类
2017/01/14 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python 串口读写的实现方法
2019/06/12 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Django中FilePathField字段的用法
2020/05/21 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
行政总监岗位职责
2013/12/05 职场文书
狼和鹿教学反思
2014/02/05 职场文书
办公室岗位职责
2014/02/12 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers