recherche

Maison >interface Web >js tutoriel >Jquery utilise les événements mouseenter et mouseleave pour partager un exemple de code qui permet à la souris de passer à travers la couche contextuelle et d'être cliquable

Jquery utilise les événements mouseenter et mouseleave pour partager un exemple de code qui permet à la souris de passer à travers la couche contextuelle et d'être cliquable

黄舟
黄舟original
2017-06-28 10:12:561162parcourir

Cet article présente principalement Jquery utilisant mouseenter et mouseleave pour réaliser que la souris passe à travers le calque contextuel et peut être cliquée. Les amis dans le besoin peuvent venir ici pour référence, j'espère que cela sera utile à tout le monde

L'exemple est le suivant : 

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


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery : les événements mouseenter et mouseleave provoquent un problème de scintillementArticle suivant：jQuery : les événements mouseenter et mouseleave provoquent un problème de scintillement

Articles Liés

Voir plus