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 08 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
全面解析js中的原型,原型对象,原型链
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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP通用检测函数集合
2006/11/25 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
发现的以前不知道的函数
2006/09/19 Javascript
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Python中关键字is与==的区别简述
2014/07/31 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
python re模块的高级用法详解
2018/06/06 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python exit出错原因整理
2020/08/31 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
25岁生日感言
2014/01/13 职场文书
探矿工程师自荐信
2014/01/24 职场文书
文明社区申报材料
2014/08/21 职场文书
党小组评议意见
2015/06/02 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
大学学生会竞选稿
2015/11/19 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
MySQL中order by的使用详情
2021/11/17 MySQL
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技