kostenloser Webspace werbefrei: lima-city


Tabellenzeilen - hover

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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 :nosmile:
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Keine Chance, da der 3. td außerhalb des erste tr liegt.
    Doch, es ist mittels dem CSS-Selektor '+' möglilch:
    tr:hover, tr:hover + tr {...}
    Dieser Code Spricht in deinem Beispiel, die Zeile an, die :hover auslöst, und die nachfolgende Zeile.
    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>
  5. Autor dieses Themas

    sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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 :smile:


    edit
    thomasba hat's mir verraten -

    Die beiden <tr> mit einem <tbody></tbody> umschließen und den hovereffekt auf das dingens anwenden! Prima Sache!! :king:

    Beitrag zuletzt geändert: 17.2.2011 23:43:36 von sonok
  6. thomasba

    Co-Admin Kostenloser Webspace von thomasba

    thomasba hat kostenlosen Webspace.

    Da tbody in einer Tabelle mehrmals erlaubt ist, kann man das so machen:


    <!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>
    (hab das bsp. von metalmachine abgeändert ;) )

    Hier kann man das ganze sehen
  7. 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
  8. 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 :thumb:
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!