nicht angemeldet
Hintergrund-Farbe bei Hover ändern.
Hallo,
ich möchte gerne die Hintergrundfarbe einer einzelnen Zelle (Tabelle) verändern, wenn man mit der Mouse drüber fährt. Also quasi einen typischen Mouse-RollOver-Effekt. Lässt sich das auch mit CSS realisieren? das Pseudoformat :hover wird für td:hover nicht verarbeitet.
Gruß,
S.Goertz
-
Hallo,
ich möchte gerne die Hintergrundfarbe einer einzelnen Zelle (Tabelle) verändern, wenn man mit der Mouse drüber fährt. Also quasi einen typischen Mouse-RollOver-Effekt. Lässt sich das auch mit CSS realisieren? das Pseudoformat :hover wird für td:hover nicht verarbeitet.
Doch. Laut CSS2 kann die Pseudoklasse :hover auch dem Element TD zugewiesen werden. CSS2-fähige Browser, wie Mozilla, machen das auch. Für IE muss ein Link (<a href="...">) in der Zelle stehen, der als Block-Element dargestellt wird und mit width:100% die Zelle ganz ausfüllt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
td.hoverCSS2:hover {background-color:red;}
td.hoverLink a:hover {background-color:red;}
td.hoverLinkganzeZelle a {display:block; width:100%;}
td.hoverLinkganzeZelle a:hover {background-color:red;}
-->
</style>
</head>
<body>
<table border="1" width="300">
<tr>
<td class="hoverCSS2">Text in der Zelle</td>
</tr>
<tr>
<td class="hoverLink"><a href="#">LinkText</a></td>
</tr>
<tr>
<td class="hoverLinkganzeZelle"><a href="#">LinkText</a></td>
</tr>
</table>
</body>
</html>viele Grüße
Axel