Tabellenzeile markieren mit hover

Status
Nicht offen für weitere Antworten.

MiRaMC

Erfahrenes Mitglied
Hallo,
ich will auf meiner Seite eine Tabelle, bei der bei drüberfahren mit der Maus die jeweilige Tabellenzeile markiert wird.
Ich hab gedacht ich erstelle einen Selektor den ich dann der Tabelle zuweise und der die :hover-Funktion zur Änderung der Zeilenhintergrundfarbe benutzt:

Code:
.eigene_tabelle tr:hover {
  background-color: #C7C7C7;
}

Das funktioniert auch. Nur muss ja jetzt die Schriftfarbe in den einzelnen Spalten der Zeile auch geändert werden, da sie sonst auf dem Hintergrund nicht mehr lesbar ist. Wie kann ich das jetzt anstellen
 
So lange du nicht für die Tabellenzellen explizit eine Schriftfarbe angegeben hast, kannst du die Eigenschaft einfach der Regel anhängen:
Code:
.eigene_tabelle tr:hover {
	background-color: #C7C7C7;
	color: #F00;
}
Sonst musst du diese im Selektor zusätzlich angeben:
Code:
.eigene_tabelle tr:hover,
.eigene_tabelle tr:hover td,
.eigene_tabelle tr:hover th {
	background-color: #C7C7C7;
	color: #F00;
}
Oder du weißt gleich sämtlichen Kind-Elementen diese Eigenschaft zu:
Code:
.eigene_tabelle tr:hover * {
	background-color: #C7C7C7;
	color: #F00;
}
 
Status
Nicht offen für weitere Antworten.
Zurück