CSS bewirkt, dass sich die Farbe der gesamten Linie ändert, wenn die Maus darauf platziert wird

Zusammenfassung:

Im Folgenden finden Sie eine Methode zum Ändern der Farbe der gesamten Zeile, wenn die Maus in CSS auf eine angegebene Zeile bewegt wird, wie unten gezeigt:

Umsetzungsideen:

Verwenden Sie die Pseudoklasse :hover, um die Hintergrundfarbe zu ändern, wenn die Maus darauf zeigt, wie im folgenden Beispiel gezeigt:

Beispiel:

Wenn die Maus auf das darunterliegende Div bewegt wird, ändert sich die Hintergrundfarbe entsprechend.

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>Maomao-Anleitung (www.maomao365.com)</title>
<style type="text/css">
div{
  Überlauf: versteckt;
  Leerzeichen:nowrap;
  Höhe: 30px;
  Breite: 250px; 
  Hintergrundfarbe: weiß;
  Farbe: Schwarz;
}
.divTest:hover{
  Hintergrundfarbe: blau;
  Farbe: weiß;
}
</Stil>
</Kopf>
<Text>
<div class="divTest">Wenn die Maus über das Div bewegt wird, ändert sich die Hintergrundfarbe</div>
</body>
</html>

Zusammenfassen

Oben ist das CSS, das Ihnen der Editor vorgestellt hat, um den Farbänderungseffekt der gesamten Linie zu erzielen, wenn die Maus darauf platziert wird. Ich hoffe, es wird Ihnen hilfreich sein!

<<: Einführung in die Verwendung des Select-Optgroup-Tags in HTML

>>: Prinzip des Ladens von Docker-Images

So verwenden Sie Spark und Scala zum Analysieren von Apache-Zugriffsprotokollen

CSS bewirkt, dass sich die Farbe der gesamten Linie ändert, wenn die Maus darauf platziert wird

So verwenden Sie Spark und Scala zum Analysieren von Apache-Zugriffsprotokollen

Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)

Nginx-Konfiguration und -Kompatibilität mit der Codeanalyse der HTTP-Implementierung

So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular

Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst

Reiner CSS-Code zum Erzielen eines Drag-Effekts

JavaScript-Code zur Implementierung eines einfachen Rechners

Einrichten der React-Native-Umgebung und grundlegende Einführung

Detaillierte Erläuterung der Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten

Detaillierte Erklärung zur Installation von mysql5.6 aus einem Binärinstallationspaket in einer CentOS7-Umgebung

Artikel empfehlen

mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()

Befehle zum Deaktivieren und Aktivieren von MySQL-Fremdschlüsseleinschränkungen

Das Linux-System öffnet die Ports 3306, 8080 usw. zur Außenwelt. Detaillierte Erläuterung der Firewall-Einstellungen

Zusammenfassung der Vue-Datenreaktionsfähigkeit

Detaillierte Erläuterung der Rolle und des Funktionsprinzips der MySQL-Master-Slave-Replikation

So bringen Sie Ihren Browser dazu, mit JavaScript zu sprechen

100-1% des Inhalts der Website ist Navigation

4 flexible SCSS-Kompilierungsausgabestile

Details zur JS-Array-Deduplizierung

Häufige Fehler bei der Verwendung von React Hooks

So implementieren Sie Nginx Reverse Proxy und Load Balancing (basierend auf Linux)

So erstellen Sie eine Vue3-Desktopanwendung

So generieren Sie ein kostenloses Zertifikat mit OpenSSL

Methode zum Erstellen eines privaten Docker-Warehouses basierend auf Harbor

Detaillierte Erläuterung des Mysql-Kommunikationsprotokolls