Tabellenfarbe ändern bei MouseOver

[mo]

Hallo

Ich möchte gerne einen Navigationsleiste mit CSS machen.
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.

Ich habe bereits eine Klasse für die Tabellenzelle definiert:

td.menueLevel1{
  background-color:#cccccc;
  text-align:right;
  vertical-align:middle;
  width:180px;
  height:20px;
  font-family : arial;
  font-size : 10pt;
  font-weight : bold;
  color: #000000;
  text-align : left;
  padding-left: 14px;
  border-bottom:3px solid #999999;
}

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

Bin für jeden Tip dankbar

Gruß

MO

[norbert =:-)]

Hallo mo!

Da Du Tabellenzellen nicht in einen Link verpacken kannst, musst Du wohl auf JavaScript zurückgreifen.

<tr ... bzw ... td onMouseOver="this.style.backgroundColor='D6D6D6';" onMouseOut="this.style.backgroundColor='333333';">

mfg

norbert =:-)

[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