✔ hover-effekt

[Headymaster]

Hallo!

Ich würde gerne in meinem forum einen Hovereffekt für die Zeilen einrichten.

So ist das template aufgebaut:

<tr>
  <td class="forum_subkat_first"><a href="[kat_link]">[kat_name]</a></td>
  <td class="forum_subkat_first">[last_post]</td>
  <td class="forum_subkat">[threads]</td>
  <td class="forum_subkat">[posts]</td>
</tr>

Ich habe ausprobiert, in dem stylesheet nen hovereffekt einzubauen, zwar so:

td.forum_subkat_first:hover {
und hier dann andre Farbe als Standard
}

aber das geht einfachnicht

Könnt ihr mir da vll helfen

MFG Niels

 

[Maik]

In welchem Browser hast du das Stylesheet getestet? Etwa im IE (< Version 7)? Der unterstützt die :hover-Pseudoklasse nur für das a-Element und benötigt in diesem Fall Javascript.

Ansonsten funktioniert es in den modernen Browsern einwandfrei.

 

[Headymaster]

Hmm funktioniert jetzt, nur is das Prob, dass zwar wenn ich über eine Zelle fahre diese nen Hovereffekt hat aber es sollte ja die ganze Reihe von links nach rechts den Hovereffekt bekommen....

Verstehst du was ich meine?

MFG Niels

 

[Maik]

Klar Wende die :hover-Pseudoklasse einfach auf das tr-Element an:

tr.hover:hover {
background:red;
}

<tr class="hover">
    <td class="forum_subkat_first"><a href="[kat_link]">[kat_name]</a></td>
    <td class="forum_subkat_first">[last_post]</td>
    <td class="forum_subkat">[threads]</td>
    <td class="forum_subkat">[posts]</td>
</tr>

 

[Headymaster]

Das ganze funktioniert nicht, der Hintergrund bleibt gleich, egal ob ich über die Reiher rüberfahre mit der Maus oder nicht...

MFG Niels

 

[Maik]

Ich weiß nicht, was da bei dir falsch läuft, aber das gezeigte CSS-Beispiel funktioniert bei mir (abgesehen vom IE 6.0) in allen modernen Browsern einwandfrei.

 

[Headymaster]

Ja aber sagen wir die Zellen haben wegen der Klassen von dem <td>-Element schon Hintergrundfarben und die sollen jetzt bei einem Hover-effekt verändert werden, wie soll dass dann durch das <tr>-Element geschehen?!

Habe das so:

<tr class="hover">
  <td class="forum_subkat_first"><a href="[kat_link]">[kat_name]</a></td>
  <td class="forum_subkat_first">[last_post]</td>
  <td class="forum_subkat">[threads]</td>
  <td class="forum_subkat">[posts]</td>
</tr>

/* Stylesheet */
td.forum_subkat {
 background-color:#ffffff;
}

tr.hover:hover {
 background:#f2f2f2;
}

td.forum_subkat_first {
 background-color:#ffffff;
 text-align:left;
 height:45px;
}

Habe es genauso wie du sagtest....aber geht halt nicht

Benutze die neuste Version des Firefox

MFG Niels

 

[Maik]

Wenn du die Hintergrundfarbe einer Tabellenzeile tauschen willst, mußt du auch für die Tabellenzeile die Hintergrundfarbe im Normalzustand definieren, und nicht für die Tabellenzellen:

tr.hover {
 background:#fff;
}

tr.hover:hover {
 background:#f2f2f2;
}

td.forum_subkat_first {
 text-align:left;
 height:45px;
}

 

[Headymaster]

Ah super jetzt klappt es

Danke dir

MFG Niels