Comment écrire le survol en jquery

hover est un effet interactif couramment utilisé dans jquery, qui peut déclencher des événements correspondants lorsque la souris survole ou quitte. Voici comment écrire le survol en jquery.

1. Utilisation du survol pour un seul élément

Vous pouvez utiliser la méthode hover() de jquery pour ajouter des gestionnaires de survol de la souris et laisser des événements pour un seul élément.

$("element").hover(
    function(){
        $(this).addClass("hover");//添加hover类名
    },
    function(){
        $(this).removeClass("hover");//移除hover类名
    }
);

Dans le code ci-dessus, nous sélectionnons d'abord un élément, puis utilisons la méthode hover() pour ajouter un gestionnaire d'événements. Lorsque la souris entre dans l'élément, la première fonction est exécutée, ce qui ajoute le nom de la classe de survol à l'élément. Lorsque la souris sort de l'élément, la deuxième fonction est exécutée, ce qui supprime le nom de la classe de survol de l'élément. .

2. Utiliser le survol pour plusieurs éléments

Si vous devez obtenir l'effet de survol pour plusieurs éléments, nous pouvons y parvenir en parcourant chaque élément, puis en appelant la méthode hover().

$(".elements").each(function(){
    $(this).hover(
        function(){
            $(this).addClass("hover");//添加hover类名
        },
        function(){
            $(this).removeClass("hover");//移除hover类名
        }
    );
});

Dans le code ci-dessus, nous sélectionnons d'abord tous les éléments, puis utilisons la méthode each() pour parcourir chaque élément, puis appelons la méthode hover() pour ajouter des gestionnaires d'événements.

3. méthode d'abréviation du survol

jquery nous fournit un moyen pratique d'abréger l'effet de survol. Nous pouvons utiliser la méthode mouseenter() pour remplacer le premier paramètre de la méthode hover(). De même, nous pouvons utiliser la méthode mouseleave() pour remplacer le deuxième paramètre de la méthode hover().

$("element").mouseenter(function(){
    $(this).addClass("hover");//添加hover类名
}).mouseleave(function(){
    $(this).removeClass("hover");//移除hover类名
});

Dans le code ci-dessus, nous utilisons la méthode mouseenter() pour ajouter le gestionnaire d'événements de déplacement de la souris, la méthode mouseleave() pour ajouter le gestionnaire d'événements de déplacement de la souris et utilisons des appels en chaîne pour simplifier le code.

Résumé

hover est un effet interactif couramment utilisé dans jquery, qui peut déclencher des événements correspondants lorsque la souris survole ou quitte. jquery fournit la méthode hover() et la méthode d'abréviation, qui peuvent facilement ajouter des effets de survol à un ou plusieurs éléments. Lorsque vous utilisez le survol, vous devez faire attention à éviter de déclencher des événements plusieurs fois pour améliorer les performances.

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!