Hover Effekt

[Emanuel]

Hallo Leute!

Es geht darum, die ganze Zeile einer Tabelle anders zu färben, wenn man mit der Maus darüber fährt. Funktioniert mit einer Farbe ohne Probleme.
Es soll aber jede Zweite Zeile andersfärbig dargestellt werden aber die gleiche Hover Farbe haben. Wenn möglich mit nur einem id-Selektor.
1. Frage, wieso funktioniert das nicht so?:
Stylesheet:
***
tr#info_tr:hover{
  background:black;
}
***
<table>
<tr style="background:blue" id="info_tr">
 <td>1.Zelle</td>
 <td>2.Zelle</td>
</tr>
<tr style="background:red" id="info_tr">
 <td>1.Zelle</td>
 <td>2.Zelle</td>
</tr>
</table>
Leider wird, wenn ich das so mache die Farbe der Zeilen nicht geändert.
Gibts eine andere Möglichkeit ausser zwei id-Selektoren (z.B.:
tr#info_tr{
  background:red;
}

tr#info_tr:hover{
  background:black;
}

tr#info_tr2{
  background:blue;
}

tr#info_tr2:hover{
  background:black;
}

<table>
<tr id="info_tr">
 <td>1.Zelle</td>
 <td>2.Zelle</td>
</tr>
<tr id="info_tr2">
 <td>1.Zelle</td>
 <td>2.Zelle</td>
</tr>
</table>

zu verwenden?
Danke für eure Hilfe!

MfG Emanuel

[Cheatah]

Hi,

1. Frage, wieso funktioniert das nicht so?:

weil eine ID dokumentweit eindeutig sein muss, und weil "funktioniert nicht" nicht funktioniert.

Leider wird, wenn ich das so mache die Farbe der Zeilen nicht geändert.

Doch, die der Zeilen schon, nicht aber die der (darüberliegenden) Zellen. Ein frisch poliertes Parkett sieht man nicht, wenn ein Teppichfußboden drauf liegt.

Gibts eine andere Möglichkeit ausser zwei id-Selektoren (z.B.:

Wieso eigentlich IDs?

Danke für eure Hilfe!

:nth-child() gibt es erst ab CSS/3.0, und es ist auch weitgehend unimplementiert. Mit viel Aufwand kannst Du über den +-Selektor in Verbindung mit :first-child arbeiten.

Cheatah

[Emanuel]

Hallo,

weil eine ID dokumentweit eindeutig sein muss, und weil "funktioniert nicht" nicht funktioniert.

Das passt schon, da ich ja die gleiche ID verwenden will für beide <tr>. Die ID besagt, dass eben die Farbe 'schwarz' als background verwendet werden soll, wenn sich der Mauszeiger über die Zeile bewegt.

Doch, die der Zeilen schon, nicht aber die der (darüberliegenden) Zellen. Ein frisch poliertes Parkett sieht man nicht, wenn ein Teppichfußboden drauf liegt.

Interessant dabei ist aber, dass es funktioniert, wenn der <tr> kein background zugewiesen wird. Ich spreche die <td> gar nicht an bzgl. dem background.

Wieso eigentlich IDs?

Ob ich Klassen oder ID verwende ist meines erachtens ziehmlich egal.

:nth-child() gibt es erst ab CSS/3.0, und es ist auch weitgehend unimplementiert. Mit viel Aufwand kannst Du über den +-Selektor in Verbindung mit :first-child arbeiten.

Das ist, denke ich, sehr viel auswendiger.

MfG Emanuel

[Cheatah]

Hi,

weil eine ID dokumentweit eindeutig sein muss, und weil "funktioniert nicht" nicht funktioniert.
Das passt schon, da ich ja die gleiche ID verwenden will für beide <tr>.

was Du willst ist egal. Eine ID *muss* dokumentweit eindeutig sein, sonst ist Dein Struktur-Code kaputt.

Die ID besagt, dass eben die Farbe 'schwarz' als background verwendet werden soll, wenn sich der Mauszeiger über die Zeile bewegt.

Nein. Nichts in HTML sagt irgend etwas über irgend eine Darstellung aus. Die ID besagt, dass das Element bemerkenswert eindeutig ist.

Ich spreche die <td> gar nicht an bzgl. dem background.

Stimmt, da hatte ich mich verguckt. Mein Fehler.

Wieso eigentlich IDs?
Ob ich Klassen oder ID verwende ist meines erachtens ziehmlich egal.

Nein, ist es nicht. Das eine *darf* nicht funktionieren, das andere schon.

:nth-child() gibt es erst ab CSS/3.0, und es ist auch weitgehend unimplementiert. Mit viel Aufwand kannst Du über den +-Selektor in Verbindung mit :first-child arbeiten.
Das ist, denke ich, sehr viel auswendiger.

Aus- und auf-, ja.

Cheatah

[MudGuard]

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

[Emanuel]

Hallo,

danke, jetzt ist mir auch klar wieso das nicht funktioniert.

Bzgl. der 'mehrfachen identischen ID-Werte' weiß ich nicht recht wie ich das verstehen soll. Meint ihr, dass jede ID die im Stylesheet definiert wird nur EINMAL im gesamten Code verwendet werden darf? Ich dachte, das wäre genauso wie Klassen einfach nur eine Zuweisung für Eigenschaften die die Elemente erfüllen sollen.

Ansonsten danke für eure Hilfe!

MfG Emanuel

[MudGuard]

Hi,

Bzgl. der 'mehrfachen identischen ID-Werte' weiß ich nicht recht wie ich das verstehen soll.
Meint ihr, dass jede ID die im Stylesheet definiert wird nur EINMAL im gesamten

Dokument

verwendet werden darf?

Natürlich. Sonst wäre die ID_entifikation des Elementes ja nicht gegeben.

Ich dachte, das wäre genauso wie Klassen einfach nur eine Zuweisung für Eigenschaften die die Elemente erfüllen sollen.

Wenn Klassen und IDs identische Wirkung hätten, bräuchte man nur eins von beiden.

cu,
Andreas

[Gunnar Bittersmann]

Hello out there!

Bzgl. der 'mehrfachen identischen ID-Werte' weiß ich nicht recht wie ich das verstehen soll. Meint ihr, dass jede ID die im Stylesheet definiert wird nur EINMAL im gesamten Code verwendet werden darf? Ich dachte, das wäre genauso wie Klassen einfach nur eine Zuweisung für Eigenschaften die die Elemente erfüllen sollen.

[CLASS-ID]

See ya up the road,
Gunnar