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 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php实现URL加密解密的方法
2016/11/17 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python实现列表的排序方法分享
2019/07/01 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
新驾驶员个人自我评价
2014/01/03 职场文书
和平主题的演讲稿
2014/01/12 职场文书
实习评语大全
2014/04/26 职场文书
服务宗旨标语
2014/07/01 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年老干部工作总结
2015/04/23 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
Win10 Anaconda安装python-pcl
2022/04/29 Servers
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle