nicht angemeldet
Hintergrundfarbe einer Tabellenzelle bei Mousover ändern
Ich habe eine Tabellenzelle in einen Link verwandelt:
<a HREF="link.htm">
<td>
<p align="center">Text
</td> </a>
Jetzt ist der gesamte Zellenbereich eine Schaltfläche.
Nun möchte ich, dass sich die Hintergrundfarbe der Zelle ändert, wenn die Maus darüber bewegt wird.
a:hover { background-color: #FF0000} funktioniert aber nicht.
Wer weiss Rat?
-
Hi,
Ich habe eine Tabellenzelle in einen Link verwandelt:
nein, hast Du nicht.
<a HREF="link.htm">
<td>Diese Schachtelung ist ungültig. Das <a> muss _in_ das <td>.
a:hover { background-color: #FF0000} funktioniert aber nicht.
Es wird funktionieren, wenn der Browser ein <a> findet, was bei Deinem Konstrukt nicht der Fall ist. Natürlich wird nur der Hintergrund des Links verändert, nicht der der Tabellenzelle; dafür musst Du td:hover definieren, was leider nur wenige Browser unterstützten. Zum Glück ist es bei CSS aber nicht kritisch, wenn ein Element nicht reagiert; die Funktionalität ist nicht eingeschränkt.
Cheatah
--
X-Will-Answer-Email: No-
nein, hast Du nicht.
<a HREF="link.htm">
<td>Diese Schachtelung ist ungültig. Das <a> muss _in_ das <td>.
a:hover { background-color: #FF0000} funktioniert aber nicht.
Es wird funktionieren, wenn der Browser ein <a> findet, was bei Deinem Konstrukt nicht der Fall ist. Natürlich wird nur der Hintergrund des Links verändert, nicht der der Tabellenzelle; dafür musst Du td:hover definieren, was leider nur wenige Browser unterstützten. Zum Glück ist es bei CSS aber nicht kritisch, wenn ein Element nicht reagiert; die Funktionalität ist nicht eingeschränkt.
Cheatah
»»
Das td:hover scheint wirklich browserspezifisch zu sein. Bei mir (IE 5.0) funktioniert es nicht. Allerdings kann ich, entgegen aller Behauptungen, ein td in einen Link setzen. Folgendes Program funktioniert, wie es soll. Der ganze td-Bereich ist anklickbar:
<style TYPE="TEXT/CSS">
<!--
td a:hover{ background-color: #0000FF}
-->
</style>
</head>
<body>
<table WIDTH="427" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<tr>
<td WIDTH="93" HEIGHT="20"></td>
<td WIDTH="194"></td>
<td WIDTH="140"></td>
</tr>
<tr>
<td HEIGHT="121"></td>
<A HREF="http://forum.de.selfhtml.org">
<td BGCOLOR="#FFFF00" ALIGN="CENTER">http://forum.de.selfhtml.org</td>
</A>
<td></td>
</tr>
<tr>
<td HEIGHT="38"></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>-
Hi,
Das td:hover scheint wirklich browserspezifisch zu sein.
genauer gesagt ist es die Unterstützung von Pseudoklassen in allgemeinen Elementen. Erst ab CSS/2.0 sind Dinge wie :hover außerhalb von Links definiert.
Allerdings kann ich, entgegen aller Behauptungen, ein td in einen Link setzen.
Wenn das funktioniert, ist es ein Bug im Browser.
Folgendes Program funktioniert, wie es soll.
In welchem Browser?
<style TYPE="TEXT/CSS">
Der Content-Type ist case-sensitive. "TEXT/CSS" existiert nicht, im Gegensatz zu "text/css".
td a:hover{ background-color: #0000FF}
Dies definiert eine :hover-Hintergrundfarbe für <a>-Tags, welche sich innerhalb eines <td>-Tags befinden.
<A HREF="http://forum.de.selfhtml.org">
<td BGCOLOR="#FFFF00" ALIGN="CENTER">http://forum.de.selfhtml.org</td>
</A>Cheatah
--
X-Will-Answer-Email: No
-
-
-
Hi,
Ich habe eine Tabellenzelle in einen Link verwandelt:
<a HREF="link.htm">
<td>
<p align="center">Text
</td> </a>Soll das HTML sein? Ist es nämlich nicht. Weder td noch p sind in a erlaubt.
<td><a href="...">blabla</a></td>
dazu im CSS:
td a { display:block; width:100%; height:100%; }
td a:hover { background-color:blue; }weiss Rat?
cu,
Andreas -
Hallo Chameleon,
Wenn es Dir nur darum geht eine Viereckige Schaltfläche mit Hover-Effekt 'zu bauen', dann schmeiss die Tabelle raus und mach es mit div wie auf
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm
Dann sparst Du Dir ne menge grauer Haare ;-)
Grüße aus Nürnberg, HarryS