Tabellenzeilen - hover
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alter hase
anwenden
ausprobieren
chance
code
einstellen
fehlverhalten
frage
http
jemand
nachfolgende zeile
nachzulesen
prima sache
richtung
spalten
tabelle
test
url
verraten
zeile
-
Hallo!
Also, ich habe eine Tabelle mit mehreren Zeilen, angenommen 4 Stück.
Bei den Zeilen habe ich jeweils die ersten Zellen von zwei Zeilen miteinander verbunden, sodaß der Eindruck entsteht, daß es eine Zeile wäre.
XXXXXXXXXXXXX X X A1 X X A XXXXXXX X X A2 X XXXXXXXXXXXXX X X B1 X X B XXXXXXX X X B2 X XXXXXXXXXXXXX
Jetzt das Problem - da es ein paar mehr Zeilen und Spalten sind, möchte ich mit einem <tr> - hover die jeweilige Zeilenschriftfarbe ändern ... was ja an sich auch richtig funktioniert, nur daß leider dann A & A1, nicht aber auch A2 markiert werden bzw nur A2.
Die Frage ist also, wie ich den hovereffekt auf zwei Tabellenzeilen auf einmal ausdehnen kann, wenn nur eine der beiden Zeilen an sich ja den Mauszeiger "erlebt"! Mir fällt keine Lösung ein
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Keine Chance, da der 3. td außerhalb des erste tr liegt.
Lösungsvorschlag 1:
Tabelle in Tabelle
Lösungsvorschlag 2:
Gefloatete DIVs die mit einem weiteren DIV umschlossen sind.
Bstimmt gibts noch ne JS-Lösung, aber da bin ich der Falsche für.
Gruß Tom -
Keine Chance, da der 3. td außerhalb des erste tr liegt.
Doch, es ist mittels dem CSS-Selektor '+' möglilch:
Dieser Code Spricht in deinem Beispiel, die Zeile an, die :hover auslöst, und die nachfolgende Zeile.tr:hover, tr:hover + tr {...}
Nachzulesen auf CSS4You:Verschachtelte Selektoren.
Zum Ausprobieren:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Table-Test</title> <style type="text/css"> table, td { width: 100px; height: 25px; border: 1px solid black; text-align: center; vertical-align: middle; font-family: monospace; } tr:hover, tr:hover + tr { background-color: yellow; } </style> </head> <body> <h1>Table-Test</h1> <table> <tr> <td rowspan="2">A</td> <td>A1</td> </tr> <tr> <td>A2</td> </tr> <tr> <td rowspan="2">B</td> <td>B1</td> </tr> <tr> <td>B2</td> </tr> </table> </body> </html> -
Hm, das von metalmachine klappt ... leider nur in eine Richtung.
Wenn ich über A und A1 gehe, dann ändert sich auch die Schrift von A2; aber man kann es scheinbar nicht rückwirkend einstellen, sodaß wenn ich über A2 gehe die <tr>-Zeile darüber mit angesprochen wird .... tr:hover, tr:hover - tr {...} geht nicht.
Weiß jemand vielleicht dafür noch eine Lösung? Von mir aus auch JavaScript
edit
thomasba hat's mir verraten -
Die beiden <tr> mit einem <tbody></tbody> umschließen und den hovereffekt auf das dingens anwenden! Prima Sache!!
Beitrag zuletzt geändert: 17.2.2011 23:43:36 von sonok -
Da tbody in einer Tabelle mehrmals erlaubt ist, kann man das so machen:
(hab das bsp. von metalmachine abgeändert ;) )<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Table-Test</title> <style type="text/css"> table, td { width: 100px; height: 25px; border: 1px solid black; text-align: center; vertical-align: middle; font-family: monospace; } tbody:hover { background-color: yellow; } </style> </head> <body> <h1>Table-Test</h1> <table> <tbody> <tr> <td rowspan="2">A</td> <td>A1</td> </tr> <tr> <td>A2</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">B</td> <td>B1</td> </tr> <tr> <td>B2</td> </tr> </tbody> </table> </body> </html>
Hier kann man das ganze sehen -
Da kann ein alter Hase wie ich sogar noch was lernen.
Super und THX für den Workaround,. den ich mir sofort notiert habe.
Gruß Tom -
Das Fehlverhalten bei A1, A2 etc. hab ich bei mienem Code übersehen, sorry.
Die Idee mit <tbody> ist genial, darauf wär' ich nie gekommen
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
