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 45种缓动效果 非常酷
Jun 28 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 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生成Flash动画的实现代码
2010/03/12 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
深入理解ES7的async/await的用法
2017/09/09 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Python深入学习之闭包
2014/08/31 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
空气环保标语
2014/06/12 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
JavaScript中reduce()的用法
2022/05/11 Javascript