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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
vue时间格式化实例代码
Jun 13 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
django使用LDAP验证的方法示例
2018/12/10 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python里 super类的工作原理详解
2019/06/19 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
中文教师求职信
2014/02/22 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
电子专业求职信
2014/06/19 职场文书
工作失职检讨书
2015/01/26 职场文书
节约用水广告语60条
2019/11/14 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL