^{<rp id="lfwoc"></rp>}

Jquery利用mouseenter和mouseleave實現鼠標經過彈出層且可以點擊

2024-05-06 16:00:46

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了Jquery利用mouseenter和mouseleave實現鼠標經過彈出層且可以點擊。需要的朋友可以過來參考下，希望對大家有所幫助

實例如下所示：

復制代碼代碼如下:

<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="#">廣東省</a>
    </div>
    <div>
        <a href="#">深圳市</a>
        <a href="#">廣州市</a>
        <a href="#">東莞市</a>
    </div>
</body>
</html>