Rollover für Tabellen-Zelle ohne JS

[qsrs]

Hallo,

habe einen Rollover-Effekt für eine Tabelle mit CSS erstellt. Dazu verwende ich

a.menulink3 {
display: block;
width: 100%;
text-decoration: none;
border: none;
}
a.menulink3:hover {
display: block;
width: 100%;
text-decoration: none;
border: none;
background-color: #FFFFFF;
}

Soweit funktioniert alles. Jetzt ist es nur so, dass wenn Elemente, die in der Tabellen-Zeile vorkommen (z.B. Kontrollkästchen, diverse Formularfelder etc.), die Tabellen-Zeile in der Höhe strecken. Das Problem ist, dass der Rollover-Effekt dann nicht mehr die ganze Zelle füllt, sondern nur den Block um die Schrift [display: block;]. Ich möchte jedoch, dass die Zelle auch dann komplett die Farbe wechselt, wenn die Höhe der Zelle variiert. Wenn ich z.B. padding:4px, hinzufüge, erreiche ich das. Jedoch ist das ein fester und kein variabler Wert. Sollte sich die Zelle weiter als 4px dehnen, habe ich wieder das gleiche Problem. Und height:100% wird als Wert nicht genommen, da sich die Höhe nicht in Prozent definieren lässt.

Geht das nur mit JS (onmouseover)? Ich muss JS in diesem Script vermeiden und hoffe, dass es eine CSS-Lösung gibt.

Danke für Antworten.

 

[AKrebs70]

Hi,

ich glaube Du komst nicht drumrum Javascript zu verwenden wenn es unbedingt so sein soll wie Du es dir Vorstellst. Zumindest ist es mir nicht bekannt.

M.f.G.
Axel

 

[Liverson]

Hi,

du musst einfach nur die Tabellenzelle mit den Formatanweisungen füttern

CSS

td a { background-color: #fff; }
td a:hover { background-color:#000; }

So müßte es gehen

 

[qsrs]

Nein, das war es leider auch nicht. Habe es so versucht:

<td align=\"left\" bgcolor=\"".$array4[table_bgcolor4]."\" class=\"menulink3\">

CSS:

 td.menulink3 {
display: block;
text-decoration: none;
border: none;
}
td.menulink3 :hover {
display: block;
text-decoration: none;
border: none;
background-color: ".$array_cs3[table_hlcolor2].";