search

Home >Web Front-end >JS Tutorial >Jquery uses mouseenter and mouseleave events to share the sample code where the mouse passes through the popup layer and can be clicked

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

黄舟
黄舟Original
2017-06-28 10:12:561187browse

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>


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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery: mouseenter event and mouseleave event cause flickering problemNext article：jQuery: mouseenter event and mouseleave event cause flickering problem

Related articles

See more