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

MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067

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

MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067

JavaScript fügt Ereignis-Listener zur Ereignisdelegierung in Batches hinzu. Detaillierter Prozess

Detaillierte Erläuterung der ECharts-Mausereignisverarbeitungsmethode

So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn

Detaillierte Erläuterung der grundlegenden Verwendung der Routing-Bibliothek react-navigation6.x

Größe von PNG-Bildern mit CSS-Maske deutlich optimieren (empfohlen)

Tutorial zur gleichzeitigen Installation von Seurat2 und Seurat3 mit derselben Version von R unter Linux

CSS3 realisiert das Papierflugzeug aus der Kindheit

Detaillierte Analyse von MySQL-Datenbanktransaktionen und -Sperren

Zusammenfassung der Tipps zum Festlegen der maximalen Anzahl von Verbindungen in MySQL

Artikel empfehlen

Ein Artikel zeigt Ihnen, wie Sie den Watch-Listener von Vue verwenden

Der gesamte Prozessdatensatz der rekursiven Komponentenkapselung von Vue3

Sechs Möglichkeiten zur Steigerung der Geschwindigkeit Ihrer Website

Lösen Sie das Problem, dass ifconfig im Docker nicht verfügbar ist

So installieren Sie den Kibana-Tokenizer im Docker-Container

Vue verwendet Element-UI, um die Menünavigation zu implementieren

Lösen Sie schnell das Problem des langsamen Starts nach der Tomcat-Neukonfiguration

Durch die Anpassung des mobilen Endgeräts wird px automatisch in rem umgewandelt

So erstellen Sie schnell zig Millionen Testdaten in MySQL

Der erste Schritt beim Einstieg in die MySQL-Datenbank besteht darin, eine Tabelle zu erstellen

Erläuterung der Installation und Konfiguration zum Erstellen einer Go-Umgebung unter Linux

So verwenden Sie Docker Compose zum Erstellen eines FastDFS-Dateiservers

Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft

Detaillierte Erklärung zur Abfrage von Feldern, die „%“ enthalten, in MySQL (ESCAPE-Verwendung)

vue+el-upload realisiert den dynamischen Upload mehrerer Dateien