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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
javascript 必知必会之closure
Sep 21 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 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堆排序实现原理与应用方法
2015/01/03 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
vue实现文字加密功能
2019/09/27 Javascript
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python如何实现的二分查找算法
2020/05/27 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
某公司.Net方向面试题
2014/04/24 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
致接力运动员广播稿
2014/02/17 职场文书
《画风》教学反思
2014/04/16 职场文书
书香家庭事迹材料
2014/05/09 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
离婚协议书格式范本
2016/03/18 职场文书
公司晚会主持词
2019/04/17 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS