tr:hover nicht bei th

[iwiso]

Nabend zusammen...
Wie der Titel schon verrät, ich habe eine sehr lange Tabelle, und per maus-hover werden die tabellenzeilen andersfarbig hinterlegt, um es visuell besser sichtbar zu machen.

Allerdings möchte ich beim th, also der Tabellenüberschrift dieses nicht haben, der background soll sich also nicht ändern.

Natürlich könnte ich der tr eine Klasse zuweisen, aber gibt es noch eine andere Möglichkeit?

Danke
ImmerWIwderSOnntags

[Kai345]

[latex]Mae  govannen![/latex]

Allerdings möchte ich beim th, also der Tabellenüberschrift dieses nicht haben, der background soll sich also nicht ändern.

Natürlich könnte ich der tr eine Klasse zuweisen, aber gibt es noch eine andere Möglichkeit?

Eigentlich sollte (ungetestet)

th,  
tr:hover th {  
   background-color: #C0FFEE;  
}

ausreichen, wenn nichts spezifischeres dazwischenfunkt.

Stur lächeln und winken, Männer!

Kai

[ChrisB]

Hi,

Allerdings möchte ich beim th, also der Tabellenüberschrift dieses nicht haben, der background soll sich also nicht ändern.

Eigentlich sollte (ungetestet)

th,  
tr:hover th {  
   background-color: #C0FFEE;  
}

>   
> ausreichen  
  
Die `th`{:.language-html} sollen ja eben ihren background nicht „ändern“ – also wäre `tr:hover td`{:.language-css} der korrekte Selektor.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Kai345]

[latex]Mae  govannen![/latex]

Allerdings möchte ich beim th, also der Tabellenüberschrift dieses nicht haben, der background soll sich also nicht ändern.

Eigentlich sollte (ungetestet)

th,

tr:hover th {
   background-color: #C0FFEE;
}

> >   
> > ausreichen  
>   
> Die `th`{:.language-html} sollen ja eben ihren background nicht „ändern“ – also wäre `tr:hover td`{:.language-css} der korrekte Selektor.  
  
Kann man so sehen - die Ausgangslage geht leider aus dem Posting nicht eindeutig hervor. Ich bin davon ausgegangen, daß `tr`{:.language-css} via `tr:hover`{:.language-css} eine Hintergrund-Farbe zugewiesen bekam und man das für `th`{:.language-css} mit  `tr:hover th`{:.language-css} wieder mit der Ursprungsfarbe überschreibt. Wenn man nur die `td`{:.language-css} überhaupt mit einer Farbe versieht, ist es natürlich einfacher.  
  
Stur lächeln und winken, Männer!  
  
Kai  

-- 
`Array(16).join("x" - 1) + " Batman!"`{:.language-javascript}  
I am Pentium of Borg. Division is futile. You will be approximated.  
  
[SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)  

[Gunnar Bittersmann]

@@iwiso:

nuqneH

Allerdings möchte ich beim th, also der Tabellenüberschrift dieses nicht haben, der background soll sich also nicht ändern.

Was genau meinst du mit Tabellenüberschrift? Die Spaltenköpfe?

Die Spaltenköpfe sollten vom restlichen Tabelleninhalt http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss@title=getrennt sein:

<table>  
  <thead>  
    <tr>  
      <th></th>  
      <th>Spaltenkopf 1</th>  
      ⋮  
      <th>Spaltenkopf n</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th>Zeilenkopf 1</th>  
      <td>Datenfeld 11</td>  
      ⋮  
      <td>Datenfeld 1n</td>  
    <tr>  
    ⋮  
    <tr>  
      <th>Zeilenkopf m</th>  
      <td>Datenfeld m1</td>  
      <td>Datenfeld mn</td>  
    <tr>  
  </tbody>  
</table>

Dann kannst du den Hover-Effekt nur auf die Tabellenzeilen des tbody anwenden:

tbody tr:hover {background: hsl(0, 0%, 90%)}

Wenn die Zeilenköpfe auch nicht umgefärbt werden sollen, siehe Kai345 und ChrisB.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

tbody tr:hover {background: hsl(0, 0%, 90%)}

Wenn man nicht noch Uralt-Browser unterstützen muss (nein, muss man nicht), dann dürfte der Kindselektor performanter sein:

tbody > tr:hover {background: hsl(0, 0%, 90%)}

Qapla'