Comment définir le survol dans jquery

王林
Libérer: 2023-05-23 09:00:11
original
4525 Les gens l'ont consulté

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)
Copier après la connexion

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 :

Copier après la connexion

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

hover me
Copier après la connexion

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.

Copier après la connexion

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"); }); });
Copier après la connexion

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

  1. 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"); }); });
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!