nicht angemeldet
Hover-Effekt bei Tabellen
0 0 
MudGuard
Hover-Effekt bei Tabellen
Hallo!
Habe hier eine Tabelle mit zwei Zeilen und je vier Spalten. In jeder dieser Spalten ist ein Link.
Die Spalten sind normal schwarz mit weißem Text. Wenn man nun mit der Maus die Spalte oder den Link berührt, soll der Hintergrund weiß werden und der Text schwarz.
Wie kann ich das erreichen? Es müssen sich ja beide Farben (von der Zelle und vom Link) gleichzeitig ändern.
Gruß,
Sebastian
-
Hallo,
Die Spalten sind normal schwarz mit weißem Text. Wenn man nun mit der Maus die Spalte oder den Link berührt, soll der Hintergrund weiß werden und der Text schwarz.
Wie kann ich das erreichen? Es müssen sich ja beide Farben (von der Zelle und vom Link) gleichzeitig ändern.Mittels CSS:
tr { background: black; color: white; } tr:hover { background: white; color: black; }Leider funktioniert das im Internet Explorer <=6 nicht, deshalb musst du dabei zu JavaScript greifen. Ein Beispielcode dafür, mit einem CSS-Fallback, würde in etwa so aussehen, wobei man das JavaScript und Das CSS natürlich in eine externe Datei packen sollte, und die Links und das CSS für die Links müsste da im CSS auch angepasst werden:
<html> <head> <style type="text/css"> [code lang=css] tr { background: black; color: white; } tr:hover, tr.hover { background: white; color: black; }</style>
<script type="text/javascript">// hier wird die id der Tabelle auf die sich alles auswirken soll und der // name der CSS hover klasse übernommen, welches bei onload weiter unten // festgelegt wurde. Wenn es mehrere Tabellen sind, müsste man das anders // angehen, und eventuell mit klassen arbeiten function initHover(tableID, className) { // hier werden alle tr innerhalb der tabelle in eine variable geschrieben var trs = document.getElementById(tableID).getElementsByTagName("tr"); // mit Hilfe der Schleife gehen wir jedes einzelne tr durch und weisen ihm // bei mouseover und mouseout eine bestimmte funktion zu. for (tr in trs) { trs[tr].onmouseover = function() { // hier fügen wir den Klassennamen hinzu, wobei das tr gerne auch schon // vorher andere klassen haben darf. this.className += ' '+className; } trs[tr].onmouseout = function() { // hier entfernen wir diese klasse wieder, alle anderen klassen bleiben# // dabei aber erhalten; der RegExp ist aus [link:http://www.meyerweb.com/eric/tools/s5/@title=s5] geklaut this.className = this.className.replace(new RegExp('(^|\\s)'+className+'(\\s|$)'), RegExp.$1+RegExp.$2); } } }</script>
</head>
<!--
ich habe hier der Einfachheit halber das inline attribut onload=""
genommen, man könnte sich noch überlegen, ob man das ganze nicht#
auch in die externe Datei auslagert, zum Beispiel mit Hilfe
von addLoadEvent()
-->
<body onload="initHover('mytable', 'hover');">
<table id="mytable">
<tr><td>bla</td><td>blub</td></tr>
<tr><td>bla</td><td>blub</td></tr>
<tr><td>bla</td><td>blub</td></tr>
</body>
</html>[/code]Grüße
Jeena Paradies -
Hi,
Die Spalten sind normal schwarz mit weißem Text. Wenn man nun mit der Maus die Spalte oder den Link berührt, soll der Hintergrund weiß werden und der Text schwarz.
Wie kann ich das erreichen? Es müssen sich ja beide Farben (von der Zelle und vom Link) gleichzeitig ändern.Wieso muß sich die Zelle verändern? Mach doch einfach (display:block) den Link so groß wie die Zelle, der Hover-Effekt kann sich dann auf den Link beschränken ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Wieso muß sich die Zelle verändern? Mach doch einfach (display:block) den Link so groß wie die Zelle, der Hover-Effekt kann sich dann auf den Link beschränken ...
Hallo Andreas,
vielen Dank für den Tipp, das funktioniert perfekt.
Gruß,
Sebastian
-