Comment définir le survol dans jquery

Dans le développement front-end, les éléments de la page Web doivent généralement interagir avec la souris de l'utilisateur. Le plus courant est l'effet de survol : lorsque la souris survole l'élément, celui-ci subit des changements visuels, tels que la couleur, taille, etc. À l’heure actuelle, nous devons utiliser la méthode hover dans jQuery pour y parvenir.

Maintenant, je vais vous présenter en détail comment utiliser la méthode de survol dans jQuery pour définir l'effet de survol.

1. La syntaxe de base de la méthode hover() dans jQuery

Nous devons d'abord comprendre la syntaxe de base de la méthode hover() :

$(selector).hover(inFunction,outFunction)

Parmi eux, selector est l'élément sélectionné, et inFunction est exécuté lorsque le la souris se déplace sur l'élément. La fonction, outFunction est la fonction à exécuter lorsque la souris sort de l'élément. On peut voir que grâce à la méthode hover(), nous pouvons exécuter différentes fonctions lorsque la souris entre et sort de l'élément.

2. Utilisez la méthode hover() pour définir l'effet de survol

Ensuite, montrons comment utiliser la méthode hover() pour définir l'effet de survol.

Tout d'abord, nous devons introduire la bibliothèque jQuery dans la page :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Ensuite, nous créons un exemple d'élément et ajoutons quelques styles CSS :

<div class="example">hover me</div>

<style>
.example {
    width: 100px;
    height: 50px;
    background-color: #FFC0CB;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    cursor: pointer;
}
</style>

Maintenant, définissons l'effet de survol sur cet exemple d'élément. Lorsque la souris entre, la couleur de fond est changée et le contenu du texte est modifié ; lorsque la souris sort, l'élément est restauré à son état initial.

<script>
$(function() {
    $(".example").hover(function() {
        // 鼠标移入时执行的函数
        $(this).css("background-color", "#ffc73d");
        $(this).text("hovered");
    }, function() {
        // 鼠标移出时执行的函数
        $(this).css("background-color", "#FFC0CB");
        $(this).text("hover me");
    });
});
</script>

Expliquez le code ci-dessus :

• La fonction $() est utilisée pour sélectionner des éléments, ici l'élément avec l'exemple de classe est sélectionné ;
• La méthode hover() est passée en deux fonctions, la première fonction consiste à déplacer la souris. dans La fonction à exécuter lorsque la souris est déplacée vers l'extérieur, la deuxième fonction est la fonction à exécuter lorsque la souris est déplacée vers l'extérieur,
• Modifiez le style de l'élément dans ces deux fonctions ;

De cette façon, un simple effet de survol est obtenu.

3. Autres utilisations de la méthode hover()

En plus des utilisations ci-dessus, la méthode hover() a d'autres utilisations.

1. hover(handlerInOut)

Cette utilisation doit uniquement transmettre une fonction, et cette fonction sera définie comme fonction de gestionnaire pour les événements d'entrée et de sortie de la souris en même temps. Par exemple :

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    });
});

De cette façon, lorsque la souris se déplace dans l'élément .example, la couleur d'arrière-plan deviendra #ffc73d. Aucun changement ne se produira une fois supprimé.

2. hover(enterHandler,leaveHandler)

Cette utilisation est similaire à hover(inFunction,outFunction), sauf que les positions des paramètres de la fonction sont différentes. Par exemple :

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    }, function() {
        $(this).css("background-color", "#FFC0CB");
    });
});

De cette façon, lorsque la souris se déplace dans l'élément .example, la couleur d'arrière-plan deviendra #ffc73d. Il sera restauré une fois supprimé.

4. Résumé

Ce qui précède explique comment utiliser la méthode hover() de jQuery pour définir l'effet de survol. Lors de son utilisation, il suffit de sélectionner l'élément sur lequel l'effet doit être défini, puis de transmettre la fonction correspondante via la méthode hover().

Bien sûr, dans le développement réel, nous pouvons également avoir besoin d'effets de survol plus complexes, tels que des effets d'animation, etc. Dans ce cas, jQuery fournit une puissante bibliothèque d’effets d’animation, que nous pouvons utiliser pour obtenir des effets de survol plus riches.

En général, la méthode hover() fournie par jQuery peut obtenir rapidement et efficacement l'effet de survol des éléments de page Web, améliorant considérablement l'efficacité du développement front-end et permettant aux développeurs de se concentrer davantage sur la mise en œuvre de la logique métier.

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!