jquery setzt Mouseover von li

jQuery ist eine beliebte JavaScript-Bibliothek, die die Bearbeitung von HTML-Dokumenten und CSS-Stilen erleichtert. Wenn Sie jQuery verwenden, müssen Sie häufig Mausereignisse festlegen, z. B. Mouseover (Maus bewegt sich hinein) und Mouseout (Maus bewegt sich heraus). In diesem Artikel wird erläutert, wie Sie mit jQuery das Mouseover-Ereignis von li festlegen.

1. HTML-Dokument vorbereiten

Zuerst müssen wir ein HTML-Dokument vorbereiten, das einige li-Elemente enthält, wie unten gezeigt:

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

2. JQuery-Bibliothek einführen

Im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag des HTML-Dokuments hinzufügen Folgendes: Der Code stellt die jQuery-Bibliothek vor:

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

Beachten Sie, dass hier CDN-Links verwendet werden, die das Laden der Seite beschleunigen können.

3. JQuery-Code schreiben

Als nächstes verwenden wir jQuery, um das Mouseover-Ereignis von li festzulegen. Wählen Sie nach dem Laden der Seite alle li-Elemente aus und fügen Sie mit der Mouseover-Methode einen Ereignishandler hinzu:

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

Dieser Code bedeutet, dass nach dem Laden des Dokuments alle li-Elemente ausgewählt und die Hintergrundfarbe geändert werden, wenn sich die Maus in „Set to“ bewegt Gelb. $(this) repräsentiert das aktuelle li-Element.

4. Wirkung testen

Wir fügen den kompletten Code in das HTML-Dokument ein und öffnen die Seite im Browser. Wenn die Maus über das li-Element bewegt wird, ändert sich die Hintergrundfarbe des Elements in Gelb.

  <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. Mouseout-Ereignis hinzufügen

Zusätzlich zu Mouseover-Ereignissen können wir auch Mouseout-Ereignisse hinzufügen, also Ereignisse, die ausgelöst werden, wenn sich die Maus von einem Element entfernt. Im obigen Code können wir das Mouseout-Ereignis zum Mouseover-Ereignis hinzufügen:

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

Dieser Code bedeutet, dass die Hintergrundfarbe auf Gelb gesetzt wird, wenn die Maus in das li-Element bewegt wird, und die Hintergrundfarbe auf leer zurückgesetzt wird, wenn die Maus bewegt wird zieht aus.

6. Vollständiger Code

Der endgültige vollständige Code lautet wie folgt:

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

In diesem Artikel wird erläutert, wie Sie mit jQuery das Mouseover-Ereignis von li festlegen, die Hintergrundfarbe ändern, wenn sich die Maus hineinbewegt, und Stellen Sie die Hintergrundfarbe wieder her, wenn die Maus herausbewegt wird. Anhand dieses Beispiels können wir lernen, wie man jQuery zum Hinzufügen von Ereignishandlern verwendet und wie man CSS-Stile verwendet, um das Erscheinungsbild von Elementen zu ändern. Bei der eigentlichen Website-Entwicklung können wir je nach Bedarf unterschiedliche Mausereignisse und Stilregeln verwenden, um komplexere interaktive Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonjquery setzt Mouseover von li. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!