Tabellenfarbe ändern bei MouseOver

[Christian Seiler]

Hallo mo,

Hierbei sollen Tabellenzellen mit fester Breite und einer bestimmten Hintergrundfarbe definiert werden, in denen dann die einzelnen Menueeinträge stehen.
Bei MouseOver sollen diese Tabellenzellen ihre Farbe ändern.

Wie bringe ich diese nun dazu, dass bei A:link, A:hover, A:visited und A.Active jeweils die Tabellenzelle ihre Hintergrundfarbe ändert.

3 Möglichkeiten:

1. Mit reinem CSS - geht allerdings nicht im IE:

td.menueLevel1 { ... }
td.menueLevel1:hover { background-color: ...; }

2. Mit CSS+JavaScript:

td.menueLevel1 { ... }
td.menueLevel1_hover { /* komplett identisch mit menueLevel1 bis auf die Hintergrundfarbe */ }

<td class="menueLevel1" onmouseover="this.className='menueLevel1_hover';" onmouseout="this.className='menueLevel1';">

3. Links auf Tabellenzellengröße ausdehnen:

<td class="menueLevel1"><a...>...</a></td>

td.menueLevel1 a { width: 100%; height: 100%; display: block; }
td.menueLevel1 a:link, td.menueLevel1 a:visited { background-color: /* hintergrundfarbe normal */; }
td.menueLevel1 a:hover { background-color: /* hintergrundfarbe bei mouseover */; }

(Bei letzterem musst Du das padding für die Tabellenzelle allerdings auf 0 setzen und dafür dem <a> das padding geben, außerdem hat das letzte den Effekt, dass die ganze Tabellenzelle ein Link ist)

Viele Grüße,
Christian