PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Bei onmouseover Tabellenhintergrundfarbe ändern?


dav133
2004-05-15, 14:35:24
Kann mir mal jemand den CSS-Code geben?

imagine
2004-05-15, 17:55:15
<style type="text/css">
td:hover {background-color:#0F0;}
</style>

<table style="background-color:#F00;">
<tr>
<td>Red Text</td>
</tr>
</table>

Die Zelle wird beim überfahren grün.
Das ganze funktioniert im IE allerdings nicht, der wendet Pseudoklassen ausschließlich auf <a> Elemente mit einem "href" Attribut an. Wenn du im IE auch den selben Effekt erreichen willst musst du ganze also ändern zu:
<style type="text/css">
td a:hover {background-color:#0F0;}
</style>

<table style="background-color:#F00;">
<tr>
<td><a href="#">Red Text</a></td>
</tr>
</table>

Ränder, Abstände lassen sich ja einstellen, das Problem dass du nun aber einen Link an einer Stelle hast wo du gar keinen haben willst bleibt aber.
Du kannst mittels
td a {text-decoration:none; color:black; cursor:default;}
den Link möglichst unauffälig gestalten, beim Überfahren der Zelle wird aber in der Statusleiste immer noch "mydomain.tld/blabla/#" als Linkziel angezeigt werden, und zwar nicht nur beim IE, sondern bei allen Browsern.

Sphinx
2004-05-17, 07:06:59
Vielleicht diese Java-Lösung ?



<style type="text/css">
.firstcolor {background: #FFFFFF;}
.secondcolor {background: #000000;}
<style>

<table border="0" width="100%" cellspacing="0" cellpadding="0" onmouseover=this.className="secondcolor" onmouseout=this.className="firstcolor">

Funktionieren tut es mit Mozilla und IE sehr gut.