CSS tbody:hover und tr:hover, aber mit Ausnahme

[Rolf B]

Hallo Hank,

willst Du in manchen Tabellen tatsächlich den ganzen tbody kolorieren?! Denn das ist es, was diese Regel tut: eine Hintergrundfarbe für den kompletten tbody setzen, wenn die Maus hineinfährt. Es sei denn, am tbody ist die Klasse no_hover notiert.

Problem ist, dass tr Elemente kein Kindelement von table sein dürfen. Sie müssen in einem thead, tbody oder tfoot stehen. Wenn Du von den dreien keinen notierst, bekommst Du automatisch einen tbody ins DOM. Und der wird dann von deiner Regel erwischt, weil er natürlich keine no_hover Klasse hat.

Weitere Anmerkungen:

• deine erste Row möchte vermutlich in ein thead Element hinein, und deine letzte Row in ein tfoot Element. Dann brauchen sie keine speziellen Klassen mehr, sondern du stylest sie als Kindelemente von thead und tfoot. Mutmaßlich möchten die td Elemente der ersten Row dann auch th Elemente sein (weil sie die Spaltenüberschrift bilden).

• der IE8 hat angerufen. Er bedankt sich für die manuelle Kolorierung der Rows und lässt auch schön vom Firefox 3 grüßen (kurz vor dem Auflegen hört man, wie die beiden wieder anfangen, sich zu kloppen). Streifenmuster gelingen einfacher mit nth-of-type. Wenn Du Kopf- und Fußzeile in thead und tfoot packst, kannst Du den Selektor für die Streifenfärbung so notieren:

thead tr:nth-of-type(2n) {
   background-color: grey;
}

und bist fertig. Die ungeraden Zeilen behalten einfach die Hintergrundfarbe. Ob Du 2n schreibst oder even, ist egal.

Rolf