[CSS] Wie ganze zeile Färben
-
Hallo ich hab folgendes gemacht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style type="text/css"> .fullwidth{ width: 100%; } .hov{ background-color: white; } .hov :hover { background-color: red; } </style> </head> <body> <table class="fullwidth"> <tr class="hov"> <td>Tata</td> <td>Data</td> <td>Fata</td> </tr> <tr class="hov"> <td>Tata</td> <td>Data</td> <td>Fata</td> </tr> </table> </table> </body> </html>
Nur werden dabei die einzelnen zellen und nicht die ganze zeile angefärbt.
Wie kann man das anders machen? (sodass es funtioniert)
für hilfe wär ich sehr dankbar
-
Lass im CSS-Code das Leerzeichen zwischen .hov und :hover weg.
Wenn sie von einem Leerzeichen getrennt sind, greift die Formatierung für verschachtelte Elemente.
-
Ist dir der Unterschied zwischen ".hov :hover" und ".hov:hover" bekannt? Ersteres verwendet den sogenannten Nachfahrenselektor: Das CSS wirkt auf ein Element über dem sich der Mauszeiger befindet und das ein Kindelement eines Elementes der Klasse hov ist. Zweiteres bedeutet: Das CSS wirkt auf ein Element der Klasse hov über dem sich der Mauszeiger befindet. Ich glaube du wolltest eigentlich zweites.
Zu :hover muss ich auch noch bemerken, dass der Internet Explorer bis Version 6 :hover nur bei Links (<a>) unterstützt. Du musst dir also eventuell einen Javascript-Workaround überlegen.
-
Oh das ist mir erst jetzt aufgefallen, ich dachte halt, dass das als klasse auch mit leerzeichen geht.
Jetzt hab ich aber ein weiteres problem:
Ich habe eine wechselnd gefärbte tabelle, die mittels hover hervorgehoben werden soll.
Als css habe ich dann folgendestr.sw:hover { background-color: Red; } td.n1 { background-color: #EDEDED; } td.n2 { background-color: #F5F5F5; } tr.sw:hover td.n1 { background-color: inherit; } tr.sw:hover td.n1 { background-color: inherit; }
nur tut sich da garnichts. Geht das mit pseudoklassen überhaupt?
-
ok das hat sich von selbst gelöst.
n1 n2 sollte man schon auseinander halten.
Nochmals danke
-
Ein neues Problem am Weihnachtsabend:
tr:hover + tr.col { display: table-row; } /*tr:hover + tr.col + tr.col { display: table-row; }*/ tr.col[display=table-row] + tr.col { display: table-row; }
Also mit der Methode1(auskommentiert) funktionier das so wie es soll, aber eben nur ein element weit. Deshalb hab ich mir gedacht, dass ich das attributsbedingt mache. Nur da tut sich garnichts.
Mach ich irgendetwas falsch(anführungszeichen habe ich schon getestet), oder gibt es sowas noch nicht bei den browsern(was ich jetzt mal nicht hoffe)?
-
ich vermute gerade, dass attribute keine stylenamen enthalten dürfen.
Vielleicht mit style=display: table-row;