Hover-Effekt bei Tabellenzellen

[maglite]

Ich habe eine Tabelle mit Thumbnails, der ich in einer CSS-Datei die ID "thumbnails" zugeordnet habe. Ich will beim Überfahren mit dem Mauszeiger die Hintergrundfarbe der jeweiligen Tabellenzelle ändern.
Das hab ich momentan mit Javascript durch
<td onMouseOver="bgColor='#EEEEEE'" onMouseOut="bgColor=''">
realisiert.
Ich will aber versuchen, möglichst kein JS zu verwenden:
#thumbnails td:hover { background-color:#EEEEEE; }
funktioniert zwar mit Firefox ohne Probleme, aber der IE will sich damit nicht anfreunden.
Gibt es eine Lösung, die beide Browser akzeptieren?

Thx im Voraus,
Gruß maglite

[Ashura]

Hallo maglite.

Ich habe eine Tabelle mit Thumbnails, der ich in einer CSS-Datei die ID "thumbnails" zugeordnet habe.

Wozu dient die Tabelle hier?

Ich will beim Überfahren mit dem Mauszeiger die Hintergrundfarbe der jeweiligen Tabellenzelle ändern.
Das hab ich momentan mit Javascript durch
<td onMouseOver="bgColor='#EEEEEE'" onMouseOut="bgColor=''">
realisiert.

Warum nicht wie folgt?

<td onmouseover="[code lang=javascript]this.style.background='#eeeeee'" onmouseout="this.style.background='none'">Foo</td>[/code]

Ich will aber versuchen, möglichst kein JS zu verwenden:
#thumbnails td:hover { background-color:#EEEEEE; }
funktioniert zwar mit Firefox ohne Probleme, aber der IE will sich damit nicht anfreunden.

Dann wirst du wohl oder übel hierbei nicht auf JS verzichten können, da die derzeitigen IEs den :hover-Status nur auf Links anwenden können.

Einen schönen Donnerstag noch.

Gruß, Ash*feel free*ura

[Gernot Back]

Hallo maglite,

Gibt es eine Lösung, die beide Browser akzeptieren?

Ja, wenn du dafür sorgst, dass ein Link (A-Element) 100% Weite und Höhe der Tabellenzelle einnimmt, kannst du das mit einem simplen Hover-Effekt bewirken.

Dann kannst du noch die Eigenschaft cursor:default setzen, damit man den Link nicht unbedingt als solchen bemerkt.

Gruß Gernot

[maglite]

Danke, ich glaube, so mach ich's.
Gruß, maglite