Jquery uses mouseenter and mouseleave events to share the sample code where the mouse passes through the popup layer and can be clicked-JS Tutorial-php.cn

Jquery uses mouseenter and mouseleave events to share the sample code where the mouse passes through the popup layer and can be clicked

黄舟

Release： 2017-06-28 10:12:56

Original

1168 people have browsed it

This article mainly introduces JqueryUsing mouseenter and mouseleave to realize that the mouse passes through the pop-up layer and can be clicked. Friends in need can come here for reference, I hope it will be helpful to everyone

The example is as follows:

<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 = $("#p_pro").
position
();
            $("#float_box").css("position", "absolute");
            $("#float_box").css("left", ps.left + 20); //距离左边距
            $("#float_box").css("top", ps.top + 20); //距离上边距
            $("#p_pro").mouseenter(function () {
                $("#float_box").show();
            });
            $("#float_box").mouseleave(function () {
                $("#float_box").hide();
            });
        })
    </script>
</head>
<body>
    <p>
        <a href="#" id="p_pro">广东省</a>
    </p>
    <p id="float_box" style="
display
:none;">
        <a href="#">深圳市</a>    
        <a href="#">广州市</a>
        <a href="#">东莞市</a>
    </p>
</body>
</html>

Copy after login

The above is the detailed content of Jquery uses mouseenter and mouseleave events to share the sample code where the mouse passes through the popup layer and can be clicked. For more information, please follow other related articles on the PHP Chinese website!