jquery définit le survol de Li par la souris

jQuery est une bibliothèque JavaScript populaire qui facilite la manipulation de documents HTML et de styles CSS. Lorsque vous utilisez jQuery, vous devez souvent définir des événements de souris, tels que le survol (entrée de la souris) et la sortie de la souris (sortie de la souris). Cet article explique comment utiliser jQuery pour définir l'événement mouseover de li.

1. Préparer le document HTML

Tout d'abord, nous devons préparer un document HTML contenant quelques éléments li, comme indiqué ci-dessous :

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

2. Présentation de la bibliothèque jQuery

Dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e du document HTML, ajoutez le code suivant pour présenter la bibliothèque jQuery :

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

Notez qu'un lien CDN est utilisé ici, ce qui peut accélérer le chargement de la page.

3. Écrire le code jQuery

Ensuite, nous utilisons jQuery pour définir l'événement mouseover de li. Une fois la page chargée, sélectionnez tous les éléments li et utilisez la méthode de survol pour ajouter un gestionnaire d'événements :

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  });
});
</script>

Ce code signifie qu'une fois le document chargé, sélectionnez tous les éléments li et ajoutez Définit la couleur d'arrière-plan devient jaune lorsque la souris est déplacée. $(this) représente l'élément li actuel.

4. Effet de test

Nous collons le code complet dans le document HTML et ouvrons la page dans le navigateur. Lorsque la souris se déplace sur l'élément li, la couleur d'arrière-plan de l'élément passe au jaune.

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

5. Ajouter un événement mouseout

En plus des événements mouseover, nous pouvons également ajouter des événements mouseout, qui sont des événements qui sont déclenchés lorsque la souris s'éloigne d'un élément. Dans le code ci-dessus, nous pouvons ajouter l'événement mouseout dans l'événement mouseover :

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  }).mouseout(function(){
    $(this).css('background-color', '');
  });
});
</script>

La signification de ce code est de définir la couleur d'arrière-plan sur jaune lorsque la souris se déplace dans l'élément li, et lorsque le la souris se déplace La couleur d'arrière-plan redevient vierge.

6. Code complet

Le code complet final est le suivant :

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      }).mouseout(function(){
        $(this).css('background-color', '');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

7. Résumé#🎜 🎜#

Cet article explique comment utiliser jQuery pour définir l'événement mouseover de li, modifier la couleur d'arrière-plan lorsque la souris entre et restaurer la couleur d'arrière-plan lorsque la souris sort. Grâce à cet exemple, nous pouvons apprendre à utiliser jQuery pour ajouter des gestionnaires d'événements et à utiliser les styles CSS pour modifier l'apparence des éléments. Dans le développement réel de sites Web, nous pouvons utiliser différents événements de souris et règles de style selon les besoins pour obtenir des effets interactifs plus complexes.

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!