cari

Rumah >hujung hadapan web >tutorial js >Jquery使用mouseenter和mouseleave事件实现鼠标经过弹出层且可以点击的示例代码分享

Jquery使用mouseenter和mouseleave事件实现鼠标经过弹出层且可以点击的示例代码分享

黄舟
黄舟asal
2017-06-28 10:12:561161semak imbas

这篇文章主要介绍了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 = $("#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>


Atas ialah kandungan terperinci Jquery使用mouseenter和mouseleave事件实现鼠标经过弹出层且可以点击的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery：mouseenter事件和mouseleave事件造成闪烁的问题Artikel seterusnya：jquery：mouseenter和mouseleave事件的实例代码分享

Artikel berkaitan

Lihat lagi