Hover - Tabelle

[Jnnbo]

Hallo dedlfix,

Rechtsklick auf eine der zweiten Zeile, Element untersuchen, gegebenenfalls die tr in der DOM-Ansicht anklicken. Jetzt nach rechts schauen, welche CSS-Regeln mehr Gewicht haben, sie stehen oben. Nun die Maus in die normale Ansicht bewegen und hovern. Welche Regel steht oben? Und wo steht die Hover-Regel?

wie Matthias geschrieben hat, wurde diese Zeile:

 tbody tr:hover {background-color:red;}

durch diese Zeile:

tbody tr:nth-child(odd) { background-color:#e7e5e5;}

überschrieben. Ich habe es jetzt gedreht und es funktioniert:

	table {
		border-collapse:separate;
		border-spacing:1px;
	}

	thead { background-color:rgba(25, 85, 121, 0.75); color:#fff;}
	tbody { background-color:#f2f1f1;}
	
	th, td {
		text-align:left;
		vertical-align:top;
		padding:0.5em 1em;
	}
		
	tbody tr:nth-child(odd) { background-color:#e7e5e5;}
	tbody tr:hover {background-color:#999;}