Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

前端技术 2023/09/07 JavaScript
实例如下所示：
复制代码 代码如下:

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

本文地址：https://www.stayed.cn/item/19544

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案