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 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
node实现爬虫的几种简易方式
Aug 22 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Python实现的科学计算器功能示例
2017/08/04 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python多线程分块读取文件
2019/08/29 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Python如何定义有默认参数的函数
2020/08/10 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
销售合作意向书范本
2015/05/08 职场文书
负责培养人意见
2015/06/05 职场文书
初中体育教学随笔
2015/08/15 职场文书
2016大学军训心得体会
2016/01/11 职场文书
合同补充协议书
2016/03/24 职场文书
导游词之唐山景点
2019/12/18 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python