Die Hover-Methode in jQuery implementiert die Hervorhebung ausgewählter Elemente

Dieser Artikel enthält hauptsächlich einen Artikel über die Hover-Methode in jQuery und den Hover-Selektor in CSS, um die Methode zum Hervorheben ausgewählter Elemente zu realisieren. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Als ich heute einer älteren Schwester beim Erstellen einer Webseite half, stieß ich auf eine Anfrage wie diese:

Die Maus bewegt sich nicht hinein der Tabelle, und die Transparenz der Tabelle bleibt unverändert.

Bewegen Sie die Maus in die Tabelle, bleibt die Transparenz der schwebenden Zellen unverändert und die Transparenz der nicht schwebenden Zellen ändert sich.

Erstens den von mir erzielten Effekt posten. Zu Beginn bleibt die Transparenz der Tabelle unverändert.

Wenn ich die Maus zur dritten Zelle in der zweiten Reihe bewege, verringern die anderen Zellen ihre Transparenz.

Lösung

Zu Beginn habe ich die CSS-Implementierungsmethode verwendet, die wie folgt lautet

#table td{
 opacity:0.5;
}
#table td:hover{
 opacity:1;
}

Bei der ersten Eingabe beträgt die Tabellentransparenz jedoch 0,5, was sehr schlecht aussieht.

Später habe ich die Hover-Methode von jQuery verwendet, aber sie hat immer alle darin enthaltenen Zellen ausgewählt. Der Prozess war sehr umständlich, daher werde ich sie nicht einzeln vorstellen, sondern nur darüber sprechen, wie ich es erreicht habe.

$('#content td').hover(
  function(){
   $('#content td').css('opacity','0.5');
   $('#content td:hover').css('opacity','1');
   },
  function(){
   $('#content td').css('opacity','1');
  });

Inhalt ist der ID-Name meiner Tabelle. Sie können sehen, dass wir der Zellen-Hover-Methode zwei Funktionen hinzugefügt haben

Wenn die erste Funktion in die Tabelle verschoben wird, ist der Chef

$('#content td').css('opacity','1');

bedeutet, dass beim Hineinbewegen der Maus die Transparenz aller Zellen erhöht wird 0.5. Dann

$('#content td:hover').css('opacity','1');

Der Hover-Selektor von CSS bedeutet hier ausgewählte einzelne Zelle.

Die zweite Funktion zeigt an, wann die Maus das Formular verlässt

Verwandte Empfehlungen:

Zusammenfassung der Anwendungsbeispiele für Hover

Ausführliche Erläuterung der Verwendung des Hover-Selektors in CSS

Ausführliche Erläuterung des Konflikts zwischen Hover- und Click-Ereignissen in jQuery (Bild)

Das obige ist der detaillierte Inhalt vonDie Hover-Methode in jQuery implementiert die Hervorhebung ausgewählter Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!