dynamische hintergrundfarbe einer HTML - Tabelle
Stefan Lippmann
- css
Hi an alle,
ich hätt a mo a frag!
Und zwar habe ich mir folgendes überlegt. Ich habe eine Tabelle mit mehreren Zeilen und in einer Spalte in jeder Zelle einen Verweis. Nun will ich das sich beim überfahren des Verweises die Hintergrundfarbe der entsprechenden Zeile ändert. ist das irgendwie möglich.
Vielen Dank für Hilfe!!
hi,
Ich habe eine Tabelle mit mehreren Zeilen und in einer Spalte in jeder Zelle einen Verweis. Nun will ich das sich beim überfahren des Verweises die Hintergrundfarbe der entsprechenden Zeile ändert. ist das irgendwie möglich.
modernere Browser koennens, aeltere Herrschaften a la NC 4x nur mit sehr aufwaendigem dhtml. Beispiel:
<table cellspacing="1" cellpadding="3" border="1">
<tr>
<td onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">rot</td>
<td onmouseover="this.style.backgroundColor='green'" onmouseout="this.style.backgroundColor='white'">grün</td>
</tr>
</table>
hth + Gruesse Joachim
Ich habe eine Tabelle mit mehreren Zeilen und in einer Spalte in jeder Zelle einen Verweis. Nun will ich das sich beim überfahren des Verweises die Hintergrundfarbe der entsprechenden Zeile ändert. ist das irgendwie möglich.
Natürlich. Schau dir folgendes Beispiel-Dokument an:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>:hover für Zellen</title>
<style type="text/css">
td {
border: solid;
padding: 0;
}
td a {
display: block;
padding: 20px;
}
a:hover {
color: black;
background-color: yellow;
}
</style>
<table>
<tr>
<td><a href="http://example.com">Test</a></td>
<td><a href="http://example.com">Test</a></td>
</tr>
</table>
MI
Hallo, Michael,
Ich habe eine Tabelle mit mehreren Zeilen und in einer Spalte in jeder Zelle einen Verweis. Nun will ich das sich beim überfahren des Verweises die Hintergrundfarbe der entsprechenden Zeile ändert. ist das irgendwie möglich.
Natürlich. Schau dir folgendes Beispiel-Dokument an:
Das Dokument ist meiner Meinung nach didaktisch unklug aufgebaut.
td {border: solid; padding: 0;}
td a {display: block; padding: 20px;}
a:hover {color: black; background-color: yellow;}
Davon würde ich - zumindest in dieser Form ohne CSS-Browserweichen, conditional comments oder ähnlichem - aus praktischen Gründen momentan abraten, siehe </archiv/2002/10/25954/#m142219>. Opera bis ausschließlich 7 Beta zeigt text-decoration:underline bei a-Blockelementen fehlerhaft an. Der MSIE (hier getestet mit 6SP1) benötigt ein height:100%, damit der Hovereffekt bei allen Zellen wirkt - dies wiederum bringt den Gecko außer Rand und Band.
Vereinbar ist das Ganze nur mit verschiedenen Versionen für verschiedene Browser, beispielsweise wie gesagt über CSS-Hacks. Eine ganzheitliche interoperable CSS-Lösung habe ich bisher noch nicht gefunden beziehungsweise detailliert erarbeitet.
Grüße,
Mathias
[Ändern der Hintergrundfarbe einer Zelle bei :hover]
td {border: solid; padding: 0;}
td a {display: block; padding: 20px;}
a:hover {color: black; background-color: yellow;}Davon würde ich - zumindest in dieser Form ohne CSS-Browserweichen, conditional comments oder ähnlichem - aus praktischen Gründen momentan abraten, siehe </archiv/2002/10/25954/#m142219>. Opera bis ausschließlich 7 Beta zeigt text-decoration:underline bei a-Blockelementen fehlerhaft an.
Jeder muss für sich selbst entscheiden, ob er sich davon stören lässt. Für http://best-of-netdigest/ habe ich mich entschlossen, so zu verfahren und den Opera-Bug zu ignorieren.
Der MSIE (hier getestet mit 6SP1) benötigt ein height:100%, damit der Hovereffekt bei allen Zellen wirkt
Du hast Recht, das ist mir noch gar nicht aufgefallen, da ich bisher immer nur mit einer Zelle pro Zeile getestet habe.
MI