Überschreiben von color-Anweisungen per css
mattihas
- css
0 ChrisB0 Georg0 Gunnar Bittersmann
Hallo,
ich habe folgende Frage:
In einer Tabelle gehören mehrere aufeinanderfolgende Zeilen inhaltlich zusammen.
Markiert der Anwender eine der Zeilen mit der Maus, so sollen alle
zusammengehörenden Zeilen hervorgehoben werden.
Meine Idee war, dass ich die jeweils zusammengehörenden Zeilen in ein
<tbody>-Tag packe und per css (tbody:hover) dann Vorder- und Hintergrund einfärbe.
Dies funktioniert, solange im html-Code keine Farben definiert werden.
Da ich die Verwendung von Farben im html-Code aber nicht beinflussen kann,
suche ich eine Möglichkeit, wie ich die im html-code vorkommenden Farben
per css überschreiben kann - egal, ob diese als Attribut eines <TR> oder eines <FONT>-Tags oder sonstwo angegeben wurden.
Geht das? Wie?
Vielen Dank für alle Ideen.
Hier nun der Beispielcode:
Bewegt man die Maus auf eine der Zeilen, wird die Schriftfarbe
des gesamten <tbody> auf rot geändert. Allerdings nicht
die Hintergrundfarbe, da <TR BGCOLOR=...> eine höher Priorität hat.
<html><head>
<style type="text/css">
tbody:hover { background-color:green !important; color:red}
</style>
</head><body>
<table border="1"> <tbody>
<TR BGCOLOR="yellow"><TD>column1-1</TD></TR>
<TR BGCOLOR="yellow"><TD>column1-2</TD></TR>
</tbody>
<tbody>
<TR BGCOLOR="blue"><TD>column2-1</TD></TR>
<TR BGCOLOR="blue"><TD>column2-2</TD></TR>
</tbody>
</table>
</body></html>
Hi,
In einer Tabelle gehören mehrere aufeinanderfolgende Zeilen inhaltlich zusammen.
Markiert der Anwender eine der Zeilen mit der Maus, so sollen alle
zusammengehörenden Zeilen hervorgehoben werden.
Wie - dynamisch, clientseitig, per JavaScript?
Meine Idee war, dass ich die jeweils zusammengehörenden Zeilen in ein
<tbody>-Tag packe und per css (tbody:hover) dann Vorder- und Hintergrund einfärbe.
Wenn das nur eine temporäre Auswahl sein soll, erscheint es mir weniger sinnvoll, auf Grund dieser derart tief in die Struktur einzugreifen.
Das Vergeben bspw. einer Klasse wäre dann günstiger.
Dies funktioniert, solange im html-Code keine Farben definiert werden.
Da ich die Verwendung von Farben im html-Code aber nicht beinflussen kann
Wieso kannst du nicht?
Wenn du die „Macht“ hast, die Zeilen in TBODY-Elemente zu setzen, dann hast du doch wohl Zugriff auf HTML oder DOM.
MfG ChrisB
Meine Idee war, dass ich die jeweils zusammengehörenden Zeilen in ein
<tbody>-Tag packe und per css (tbody:hover) dann Vorder- und Hintergrund einfärbe.Wenn das nur eine temporäre Auswahl sein soll, erscheint es mir weniger sinnvoll, auf Grund dieser derart tief in die Struktur einzugreifen.
Das Vergeben bspw. einer Klasse wäre dann günstiger.
Du meinst je zusammenhängendem Bereich eine Klasse definieren und diese dann den jeweiligen <TR> zuweisen?
Dann bräuchte ich aber doch für jede Klasse eine css-Definition für 'hover'?
Da die Tabelle u.U einige Tausend Datenblöcke (zusammengehörende <TR>) enthalten kann würde das zwar gehen - aber ob das gut wäre?
Dies funktioniert, solange im html-Code keine Farben definiert werden.
Da ich die Verwendung von Farben im html-Code aber nicht beinflussen kannWieso kannst du nicht?
Wenn du die „Macht“ hast, die Zeilen in TBODY-Elemente zu setzen, dann hast du doch wohl Zugriff auf HTML oder DOM.
Die Daten welche in die <TR> eingebaut werden kommen aus einem vom Anwender parametrierbaren System. Und wenn da jemand <TR BGCOLOR=...> hinterlegt (oder auch <FONT COLOR=...> kann (und will) ich das nicht verhindern, da die Anzeige ja so sein soll, wie es der Anwender parametriert hat.
Jedoch will/muss ich den Datenblock als solchen markieren, wenn er ausgewählt wird.
matthias
Om nah hoo pez nyeetz, matthias!
Da die Tabelle u.U einige Tausend Datenblöcke (zusammengehörende <TR>) enthalten kann würde das zwar gehen - aber ob das gut wäre?
Wenn du die „Macht“ hast, die Zeilen in TBODY-Elemente zu setzen, ...
Matthias
Hallo,
Allerdings nicht
die Hintergrundfarbe, da <TR BGCOLOR=...> eine höher Priorität hat.
Versuchs mal so
[code lang=html]
<html><head>
<style type="text/css">tbody tr:hover { background-color:green !important; color:red}
</style>
Hallo,
kleine korrektur, hatte es falsch gelesen:
tbody:hover tr {background-color:green;}
Hallo,
kleine korrektur, hatte es falsch gelesen:tbody:hover tr {background-color:green;}
Danke! Das hilft mir weiter.
@@mattihas:
nuqneH
Bewegt man die Maus auf eine der Zeilen, wird die Schriftfarbe
des gesamten <tbody> auf rot geändert. Allerdings nicht
die Hintergrundfarbe, da <TR BGCOLOR=...> eine höher Priorität hat.
Nein, nicht deshalb. Du änderst die Hintergrungdfarbe von tbody, was nicht zu sehen ist, da diese vollständig von der Hintergrungdfarbe von tr überdeckt wird. [CSS21 §17.5.1]
Du musst schon die Hintergrungdfarbe von tr ändern …
suche ich eine Möglichkeit, wie ich die im html-code vorkommenden Farben
per css überschreiben kann - egal, ob diese als Attribut eines <TR> oder eines <FONT>-Tags oder sonstwo angegeben wurden.
… oder gleich die aller Nachfahrenelemente des jeweilig gehoverten tbody:
tbody:hover * { background-color:green; color:red}
'!important' ist nicht erforderlich.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Nein, nicht deshalb. Du änderst die Hintergrungdfarbe von tbody, was nicht zu sehen ist, da diese vollständig von der Hintergrungdfarbe von tr überdeckt wird. [CSS21 §17.5.1]
Matthias
Hi,
* Ich weiß, du magst keine Sekundärliteratur.
Wie kommst Du darauf? Er verlinkt doch ständig Sekundärliteratur (z.B. verlinkt er immer auf die deutsche Übersetzung statt auf die HTML-Spezifikation).
cu,
Andreas