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 中的replace方法说明
Apr 13 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
vue生命周期的探索
Apr 03 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python3.7.0的安装步骤
2018/08/27 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
优良学风班总结材料
2014/02/08 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
内勤岗位职责范本
2015/04/13 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
大队委员竞选稿
2015/11/20 职场文书
干部外出学习心得体会
2016/01/18 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
Promise静态四兄弟实现示例详解
2022/07/07 Javascript