td bgcolor wechsel per css a:hover

[Uwe]

Ich möchte, daß sich der Tabellenfeld-Hintergrund ändert, wenn die Maus über einem Link in dem Tabellenfeld schwebt. Und zwar per css, nicht js. Wie geht das?

Herzlichen Dank!

Uwe

[Jan L.]

Hallo Uwe,

Ich möchte, daß sich der Tabellenfeld-Hintergrund ändert, wenn die Maus über einem Link in dem Tabellenfeld schwebt. Und zwar per css, nicht js. Wie geht das?

Wie bei Links auch. Mit dem Pseudoformat ':hover'.

td { background: blue; }
td:hover { background: red; }

Nein, der IE rafft das nicht.

Gruß, Jan

[Tobias K.]

Hallo Uwe,  <- Begrüßung ist auch ganz nett

Ich möchte, daß sich der Tabellenfeld-Hintergrund ändert, wenn die Maus über einem Link in dem Tabellenfeld schwebt. Und zwar per css, nicht js. Wie geht das?

am einfachsten mit td:hover { background-color:...; } - nur ist der IE zu blöd dafür. Du kannst es auch mal versuchen, indem du aus <a> ein block-level-Element machst (mit display:block;) und dem dann eine Höhe/Breite von 100% verpasst (damit das <a> die ganze Zelle ausfüllt). Dann einfach mit a:hover die gewünschte Hintergrundfarbe zuweisen.

Grüße aus Nürnberg
Tobias

[Uwe]

Hi - und herzlichen Dank.
Folgender Effekt:
mit td:hover reagiert jede Zelle, egal, ob da ein Link drinsteht.
Und - wie geht das mit dem block-level-Element? Könntest du mir das ganze Ding schreiben?
sowas wie
display:block {width="100%", height="100%";}?

Herzlichen Dank

Hallo Uwe,  <- Begrüßung ist auch ganz nett

Ich möchte, daß sich der Tabellenfeld-Hintergrund ändert, wenn die Maus über einem Link in dem Tabellenfeld schwebt. Und zwar per css, nicht js. Wie geht das?
am einfachsten mit td:hover { background-color:...; } - nur ist der IE zu blöd dafür. Du kannst es auch mal versuchen, indem du aus <a> ein block-level-Element machst (mit display:block;) und dem dann eine Höhe/Breite von 100% verpasst (damit das <a> die ganze Zelle ausfüllt). Dann einfach mit a:hover die gewünschte Hintergrundfarbe zuweisen.

Grüße aus Nürnberg
Tobias

[Tobias K.]

Hallo Uwe,

mit td:hover reagiert jede Zelle, egal, ob da ein Link drinsteht.

evtl. noch mit Klassen arbeiten? (es könnte sein, dass es auch mit irgendwelchen Selectoren funktioniert, aber da kenne ich mich nicht so gut aus)

Und - wie geht das mit dem block-level-Element? Könntest du mir das ganze Ding schreiben?
sowas wie
display:block {width="100%", height="100%";}?

display ist css, gehört also in die geschweifte Klammer (außerdem nicht '=' sondern ':'):
a { display:block; width:100%; height:100%; }
a:hover { background-color:#0F0; }
du musst vielleicht noch mit Klassen arbeiten, da sonst alle Links so aussehen.

Hallo Uwe,  <- Begrüßung ist auch ganz nett

http://learn.to/quote

Grüße aus Nürnberg
Tobias

[Uwe]

Hi Jan, Hi Tobias

a { display:block; width:100%; height:100%; }
a:hover { background-color:#0F0; }

das funktioniert, herzlichen Dank. Ein Problem habe ich noch: da ich cellpadding="3"

[Uwe]

Hi Jan, Hi Tobias

sorry, das kam verstümmelt rüber

a { display:block; width:100%; height:100%; }
a:hover { background-color:#0F0; }

das funktioniert, herzlichen Dank. Ein Problem habe ich noch: da ich cellpadding="3" auf 3 gesetzt habe, werden die 3 Pixel vom Hintergrund abgezogen, beim IE unter MacOS X ist er sogar nach untern versetzt - habe ich gelöst, indem ich height:70% gesetzt habe.

Hallo Uwe,  <- Begrüßung ist auch ganz nett

http://learn.to/quote

nehme ich mir zu Herzen

einen schönen Abend

Uwe

[Martin F.]

Hi,

das funktioniert, herzlichen Dank. Ein Problem habe ich noch: da ich cellpadding="3" auf 3 gesetzt habe, werden die 3 Pixel vom Hintergrund abgezogen, beim IE unter MacOS X ist er sogar nach untern versetzt - habe ich gelöst, indem ich height:70% gesetzt habe.

Ich hoffe ich hab dich richtig verstanden. Dann könntest du ja auch das Padding der Zelle auf 0 stellen und dafür beim Link angeben.
Tschau
Martin

[Jan L.]

Hallo,

mit td:hover reagiert jede Zelle, egal, ob da ein Link drinsteht.

Sicher. Bei td:hover reagiert jedes '<td>', über das 'gehovert' wird.

Und - wie geht das mit dem block-level-Element? Könntest du mir das ganze Ding schreiben?
sowas wie
display:block {width="100%", height="100%";}?

Nö.
td a { display: block; background: red; width: 100%; height: 100%; }
td a:hover {background: blue; }

<table>
<tr>
<td><a href="...">link</a></td>
</tr>
</table>

Gruß, Jan