MudGuard: Hover Effekt

Beitrag lesen

Hi,

tr#info_tr:hover{
  background:black;
}

<tr style="background:blue" id="info_tr">

(zu den unzulässigen mehrfachen identischen id-Werten hat sich Cheatah schon geäußert).

Das style-Attribut hat eine Specificity von 1,0,0,0.
Jeder andere Selector hat eine Specificity von 0,x,x,x.

Damit gewinnt immer das style-Attribut.
Eigenschaften, für die im style-Attribut Werte vergeben wurden, können also von anderer Stelle nicht überschrieben werden.

Solange die von Cheatah erwähnten CSS3-Selektoren mangels Umsetzung in den Browsern nicht verwendbar sind, vergib abwechselnd 2 Klassen für die Zeilen.

<tr class="odd"><td>bla</td></tr>
<tr class="even"><td>bla</td></tr>
<tr class="odd"><td>bla</td></tr>
<tr class="even"><td>bla</td></tr>

definiere für diese Klassen die Hintergrundfarben:
.odd  { background-color:red; }
.even { background-color:green; }

Diese Selektoren haben eine Specificity von 0,0,1,0.

und für tr:hover dann die hover-Hintergrundfarbe:
tr:hover { background-color:yellow; }

Dieser Selektor hat eine Specificity von 0,0,1,1 und gewinnt damit gegen 0,0,1,0 wegen der gleichen ersten drei, aber höheren letzten Stelle.

cu,
Andreas

--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.