编程 Javascript

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 相关文章推荐

超强的IE背景图片闪烁(抖动)的解决办法

Sep 09 Javascript

兼容多浏览器的字幕特效Marquee的通用js类

Jul 20 Javascript

Web Inspector：关于在 Sublime Text 中调试Js的介绍

Apr 18 Javascript

对比分析json及XML

Nov 28 Javascript

举例说明如何为JavaScript的方法参数设置默认值

Nov 17 Javascript

webpack中引用jquery的简单实现

Jun 08 Javascript

js实现图片切换（动画版）

Dec 25 Javascript

使用JavaScript触发过渡效果的方法

Jan 19 Javascript

vue2中filter()的实现代码

Jul 09 Javascript

vue mint-ui tabbar变组件使用

May 04 Javascript

react在安卓中输入框被手机键盘遮挡问题的解决方法

Sep 03 Javascript

JavaScript中遍历的十种方法总结

Dec 15 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