CSS tbody:hover und tr:hover, aber mit Ausnahme

[Hank]

Hallo,

ich möchte meine Tabellenzeilen von bestimmten Tabellen hovern, aber darin auch Ausnahmen festlegen können.

Hovern klappt.

table.example tbody:hover {
background-color: #FFF;
}

table.example tr:hover {
background-color: #FFF;
}

Aber die Ausnahmnen nicht.

table.example tbody:not(.no_hover):hover {
background-color: #FFF;
}

table.example tr:not(.no_hover):hover {
background-color: #FFF;
}

Was mache ich falsch, bzw. wie macht mans korrekt?

Hank

[Gunnar Bittersmann]

@@Hank

Was mache ich falsch,

Du präsentierst CSS ohne zugehöriges Markup.

bzw. wie macht mans korrekt?

Du verlinkst ein Online-Beispiel, wo man sich das Problem ansehen kann.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

anders formuliert: das CSS sieht aus, als ob es funktionieren könnte. D.h. das Gesamtkunstwerk hat eine Macke.

Ich vermute subtile Tippfehler wie no_hover vs no-hover vs nohover.

Ein anderes Problem kann sein, dass sich die :hover-Regel auf eine andere Ebene bezieht (z.B. tr) als die Ausnahmeregel (z.B. tbody), das würde nicht funktionieren.

Rolf

[Hank]

Hallo Rolf,

anders formuliert: das CSS sieht aus, als ob es funktionieren könnte. D.h. das Gesamtkunstwerk hat eine Macke.

Danke für den Hinweis, ich fühlte mich von Gunnar lediglich blöd angemacht.
So wird verständlich, was er meinte.

Ich vermute subtile Tippfehler wie no_hover vs no-hover vs nohover.

Leider nein.

Ein anderes Problem kann sein, dass sich die :hover-Regel auf eine andere Ebene bezieht (z.B. tr) als nie Ausnahmeregel (z.B. tbody), das würde nicht funktionieren.

Ich versuche mal, es online zu stellen.

Hank

[Tabellenkalk]

Hallo,

ich fühlte mich von Gunnar lediglich blöd angemacht.

Inwiefern? Er hat dir einen Fehler aufgezeigt und hat dazu eine Lösungsmöglichkeit gegeben. Er ist nichtmal persönlich geworden, es drehte sich halt nur nicht direkt um den Fehler, um den es dir ging.

So wird verständlich, was er meinte.

Inwiefern war er unverständlich?

Gruß
Kalk

[Hank]

ich fühlte mich von Gunnar lediglich blöd angemacht.

Inwiefern? Er hat dir einen Fehler aufgezeigt und hat dazu eine Lösungsmöglichkeit gegeben. Er ist nichtmal persönlich geworden, es drehte sich halt nur nicht direkt um den Fehler, um den es dir ging.

So wird verständlich, was er meinte.

Ist ja sehr edel von Dir, hier ungefragt als Gunnars Advokat aufzutreten, aber völlig unnötig, da inzwischen längst geklärt.

Inwiefern war er unverständlich?

Wäre es das nicht gewesen, hätte Rolf es sicher nicht ergänzt.

[Gunnar Bittersmann]

@@Hank

Danke für den Hinweis, ich fühlte mich von Gunnar lediglich blöd angemacht.
So wird verständlich, was er meinte.

Was genau ist denn an „es ist falsch, als Problembeschriebung CSS ohne zugehöriges Markup zu präsentieren“ unverständlich? 🤔

🖖 Живіть довго і процвітайте

[Hank]

Was genau ist denn an „es ist falsch, als Problembeschriebung CSS ohne zugehöriges Markup zu präsentieren“ unverständlich? 🤔

... dass das CSS selber nicht direkt falsch aussieht.

Für mich las sich Dein Post nach "...hey, wenn Du Antworten willst, halte Dich an unsere Regeln, wie man fragt."

Dabei ist Deine eigentliche Aussage scheinbar: "Hey, deine Infos reichen nicht aus, weil es erstmal korrekt aussieht. Also muss der Fehler in dem Code (oder Zusammenspiel mit ihm) liegen, den Du nicht zeigst."

Deshalb fand ich Rolfs Ergänzung hier sinnvoll.

[Gunnar Bittersmann]

@@Hank

Für mich las sich Dein Post nach "...hey, wenn Du Antworten willst, halte Dich an unsere Regeln, wie man fragt."

Dabei ist Deine eigentliche Aussage scheinbar: "Hey, deine Infos reichen nicht aus, weil es erstmal korrekt aussieht. Also muss der Fehler in dem Code (oder Zusammenspiel mit ihm) liegen, den Du nicht zeigst."

Ich sehe zwischen beidem keinen Widerspruch. 😜

Deshalb fand ich Rolfs Ergänzung hier sinnvoll.

OK.

🖖 Живіть довго і процвітайте

[Mitleser 2.0]

Für mich las sich Dein Post nach "...hey, wenn Du Antworten willst, halte Dich an unsere Regeln, wie man fragt."

Dabei ist Deine eigentliche Aussage scheinbar: "Hey, deine Infos reichen nicht aus, weil es erstmal korrekt aussieht. Also muss der Fehler in dem Code (oder Zusammenspiel mit ihm) liegen, den Du nicht zeigst."

Ich sehe zwischen beidem keinen Widerspruch. 😜

They call it „Empathie“.

[Gunnar Bittersmann]

@@Mitleser 2.0

They call it „Empathie“.

Mal ganz gehässig gefragt: Darf man von den Fragenden keine Empathie erwarten? Dass sie sich mal in die Lage der Antwortenden versetzen und sich überlegen, welche Informationen zur Beantwortung ihrer Fragen erforderlich sein dürften?

(Und „die Fragende“ und „ihre Fragen“ bewusst im Plural, weil sich das bei weitem nicht nur auf den hiesigen OP bezieht.)

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo Gunnar,

They call it „Empathie“.

Mal ganz gehässig gefragt: Darf man von den Fragenden keine Empathie erwarten? Dass sie sich mal in die Lage der Antwortenden versetzen und sich überlegen, welche Informationen zur Beantwortung ihrer Fragen erforderlich sein dürften?

doch, darf man. Unbedingt.

Aber wir Kenner der Materie sollten auch auf dem Schirm haben, dass Laien nicht unbedingt wissen (können), welches Ausmaß an Informationen wohl relevant ist.

Und das führt dann eben dazu, dass manchmal tonnenweise irrelevanter Code hier reingekippt wird, in anderen Fällen wieder entscheidende Informationen fehlen. Oder sogar beides.

Und dann ist es für uns tatsächlich eine diplomatische Gratwanderung: Einerseits dem OP klarzumachen, dass da noch wesentliche Informationen fehlen, andererseits aber nicht so, dass die unterschwellige Aussage "Du hast ja keine Ahnung" rüberkommt - auch wenn das manchmal stimmt.

(Und „die Fragende“ und „ihre Fragen“ bewusst im Plural, weil sich das bei weitem nicht nur auf den hiesigen OP bezieht.)

Völlig okay.

Einen schönen Tag noch
 Martin

[Hank]

Hall "alle",

Aber wir Kenner der Materie sollten auch auf dem Schirm haben, dass Laien nicht unbedingt wissen (können), welches Ausmaß an Informationen wohl relevant ist.

Und das führt dann eben dazu, dass manchmal tonnenweise irrelevanter Code hier reingekippt wird, in anderen Fällen wieder entscheidende Informationen fehlen. Oder sogar beides.

Und dann ist es für uns tatsächlich eine diplomatische Gratwanderung: Einerseits dem OP klarzumachen, dass da noch wesentliche Informationen fehlen, andererseits aber nicht so, dass die unterschwellige Aussage "Du hast ja keine Ahnung" rüberkommt - auch wenn das manchmal stimmt.

Muss ich Dir zu 100% recht geben. 👍

Trotzdem... das Fass, was wir gerade aufmachen, ist zu groß.

Gunnar hat wirklich nicht "empathiert", dass ich seine Antwort einfach nicht kapiert habe. Wie sagte schon Stromberg... "zuviel Fachwissen engt ja auch unglaublich ein". 😜

Trotzdem ist Gunnar so oft so hilfreich... und ich komme gut damit klar, für nen Moment gedacht zu haben: "oh, das war jetzt gegens linke Schienbein getreten"... Rolf (Du bist mega empathisch!!) hats erklärt und (für mich) ist alles gut. Ich dachte, in meinem CSS liegt der Fehler, Gunnar hat auf seine Weise erklärt, dass es nicht zwingend so sein muss, ich habs nicht kapiert, weshalb Rolf die Erklärung nachgeschoben hat.

Teamwork pur, würde ich sagen. 👍

Tolles Forum, tolle "Antworter"!

Hank

P.S.: Weiter Info: Ich habe hier auch schon unter anderem Namen gepostet (danke, dass das geht) und Gunnar hat mir damals so so so geholfen, das werde ich ihm nie vergessen! 👍

[Rolf B]

Hallo Hank,

Du bist mega empathisch

Weshalb mir verboten ist, Winnetou III zu gucken…

Können wir jetzt mal wieder auf dein Problem zurückkommen? Hast Du ein Beispiel online? Wenn Du nicht auf deine Homepage verlinken willst (weil Du dann einen Hagel aus Kritik befürchtest…), könntest Du auch versuchen, das Problem bei jsfiddle oder codepen nachzustellen.

So wie ich - wo der von Dir beschriebene Fehler auftaucht, weil ich das gemacht habe, was ich im Posting von 20:22 nachgefragt habe.

Rolf

[Hank]

Hast Du ein Beispiel online? Wenn Du nicht auf deine Homepage verlinken willst (weil Du dann einen Hagel aus Kritik befürchtest…), könntest Du auch versuchen, das Problem bei jsfiddle oder codepen nachzustellen.

Habe ich gemacht.

Wenn ich den Teil

table.example tbody:not(.no_hover):hover {
background-color: green;
}

aus dem CSS herausnehme, läuft das beispiel so, wie gewünscht.

Da ich aber auch Tabellen nutze, in denen ich <tbody> notiere, würde ichs gerne drin lassen.

Warum ist es hier in diesem Fall den so hinderlich, dass es zu diesem ungewünshten Ergebnis führt?

Hank

[Rolf B]

Hallo Hank,

willst Du in manchen Tabellen tatsächlich den ganzen tbody kolorieren?! Denn das ist es, was diese Regel tut: eine Hintergrundfarbe für den kompletten tbody setzen, wenn die Maus hineinfährt. Es sei denn, am tbody ist die Klasse no_hover notiert.

Problem ist, dass tr Elemente kein Kindelement von table sein dürfen. Sie müssen in einem thead, tbody oder tfoot stehen. Wenn Du von den dreien keinen notierst, bekommst Du automatisch einen tbody ins DOM. Und der wird dann von deiner Regel erwischt, weil er natürlich keine no_hover Klasse hat.

Weitere Anmerkungen:

• deine erste Row möchte vermutlich in ein thead Element hinein, und deine letzte Row in ein tfoot Element. Dann brauchen sie keine speziellen Klassen mehr, sondern du stylest sie als Kindelemente von thead und tfoot. Mutmaßlich möchten die td Elemente der ersten Row dann auch th Elemente sein (weil sie die Spaltenüberschrift bilden).

• der IE8 hat angerufen. Er bedankt sich für die manuelle Kolorierung der Rows und lässt auch schön vom Firefox 3 grüßen (kurz vor dem Auflegen hört man, wie die beiden wieder anfangen, sich zu kloppen). Streifenmuster gelingen einfacher mit nth-of-type. Wenn Du Kopf- und Fußzeile in thead und tfoot packst, kannst Du den Selektor für die Streifenfärbung so notieren:

thead tr:nth-of-type(2n) {
   background-color: grey;
}

und bist fertig. Die ungeraden Zeilen behalten einfach die Hintergrundfarbe. Ob Du 2n schreibst oder even, ist egal.

Rolf

[Hank]

Hallo Rolf,

willst Du in manchen Tabellen tatsächlich den ganzen tbody kolorieren?! Denn das ist es, was diese Regel tut: eine Hintergrundfarbe für den kompletten tbody setzen, wenn die Maus hineinfährt. Es sei denn, am tbody ist die Klasse no_hover notiert.

Problem ist, dass tr Elemente kein Kindelement von table sein dürfen. Sie müssen in einem thead, tbody oder tfoot stehen. Wenn Du von den dreien keinen notierst, bekommst Du automatisch einen tbody ins DOM. Und der wird dann von deiner Regel erwischt, weil er natürlich keine no_hover Klasse hat.

Danke für die Erklärung.
Tja, ursprünglich dachte ich, dass es sinnvoll sein könnte, den tbody komplett zu nehmen, wenn ich mal versteckte tr innerhalb von tbodys habe. Kommt z.b. bei verschiebbaren Tabellenzeilen vor, die je eine versteckte input-Zeile haben, die ich onclick sichtbar mache.
Aber im Grunde kann ich darauf verzichten, den tbody zu kolorieren.

Weitere Anmerkungen:

• deine erste Row möchte vermutlich in ein thead Element hinein, und deine letzte Row in ein tfoot Element. Dann brauchen sie keine speziellen Klassen mehr, sondern du stylest sie als Kindelemente von thead und tfoot. Mutmaßlich möchten die td Elemente der ersten Row dann auch th Elemente sein (weil sie die Spaltenüberschrift bilden).

Ja, ich weiß, dass meine Tabellen styletechnisch noch Updates gebrauchen können. Das liegt daran, dass sie noch aus Anno-Toback-Zeiten sind. Da ging man noch etwas lachser damit um.

thead tr:nth-of-type(2n) {
   background-color: grey;
}

und bist fertig. Die ungeraden Zeilen behalten einfach die Hintergrundfarbe. Ob Du 2n schreibst oder even, ist egal.

Auch das weiß ich. Wie gesagt, da muss ich mich mal komplett drum kümmern, jetzt gings mir erstmal darum, den unhübschen Fehler auszumerzen.

Hank

[Gunnar Bittersmann]

@@Hank

• deine erste Row möchte vermutlich in ein thead Element hinein, und deine letzte Row in ein tfoot Element. Dann brauchen sie keine speziellen Klassen mehr, sondern du stylest sie als Kindelemente von thead und tfoot. Mutmaßlich möchten die td Elemente der ersten Row dann auch th Elemente sein (weil sie die Spaltenüberschrift bilden).

Ja, ich weiß, dass meine Tabellen styletechnisch noch Updates gebrauchen können.

Nein, das hat nichts mit Styling zu tun. Siehe Nachbarthread.

---

thead tr:nth-of-type(2n) {
   background-color: grey;
}

und bist fertig. Die ungeraden Zeilen behalten einfach die Hintergrundfarbe. Ob Du 2n schreibst oder even, ist egal.

Auch das weiß ich.

Du weißt auch, dass es gute Gründe gibt, Tabellen nicht wie Zebras zu färben?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

Du weißt auch, dass es gute Gründe gibt, Tabellen nicht wie Zebras zu färben?

…die damals schon kontrovers diskutiert wurden.

Der Row-Hover ist eine mögliche Alternative, aber auch nur für eine von mehreren Nutzerkategorien.

Eine Tabelle, die ziemlich breit ist, ist mittels Zebrafärbung definitiv besser lesbar. Trennlinien zwischen den Zeilen neigen dazu, vor dem Auge zu verschwimmen, bzw. das Auge neigt dazu, sich bei einer breiten Zeile im Linienwald zu verirren. Selbst ein Zebramuster kann noch schwierig zu verfolgen sein; ich habe in Tabellen schon öfter einen physischen oder virtuellen Finger benutzt, um in der Zeile zu bleiben.

Und wenn ich sehe, dass jede zweite Zeile eine etwas andere Hintergrundfarbe hat, dann würde ich mich nicht über die Hervorhebung wundern. Ich würde sagen: Eine Lesehilfe, herzlichen Dank!

Wobei es hier nur um die „viel Platz verfügbar“ Ansicht geht. Auf kleinen Viewports kriegt man ja gar nicht genug Informationen unter, um eine Lesehilfe zu benötigen.

Rolf

[Hank]

Du weißt auch, dass es gute Gründe gibt, Tabellen nicht wie Zebras zu färben?

Habe dort keinen guten Grund gegen Zebrastreifen gefunden.
Aber viele gute Gründe pro Zebrastreifen.
Zudem: Welche Zeile wird denn hervorgehoben? Die weiße oder die graue? Die hellblaue oder die dunkelblaue?
Zebrastreifen heben immer die zeile hervor, die im Blick des Lesers steht und das ist auch gut und gewollt so.
Denn somit sind die Zeilen nicht mehr identischen Inhalts: Die im Fokus des Lesers stehende Zeile ist inhaltlich wichtiger und sollte hervorgehoben werden.
Genau das machen Zebrastreifen.

[Gunnar Bittersmann]

@@Rolf B

thead tr:nth-of-type(2n) {

… Ob Du 2n schreibst oder even, ist egal.

Nö, ist es nicht.

Der Rendering-Enigine des Browsers ist es egal. Aber auch Menschen lesen Code, und für die ist even ein verständliches Schlüsselwort (sofern sie der englischen Sprache etwas mächtig sind), das kryptische 2n ruft eher ein „hä?“ hervor.

🖖 Живіть довго і процвітайте

[Tabellenkalk]

Hallo,

Aber auch Menschen lesen Code, und für die ist even ein verständliches Schlüsselwort (sofern sie der englischen Sprache etwas mächtig sind), das kryptische 2n ruft eher ein „hä?“ hervor.

ahja. Englisches Grundwissen ist als vorhanden vorauszusetzen, mathematisches nicht…
kopfschüttel

Gruß
Kalk

[Rolf B]

Hallo Hank,

du, sag einmal, hast Du beide Regelsätze in deinem Stylesheet drin?

table.example tr:hover {
   background-color: #FFF;
}

table.example tr:not(.no_hover):hover {
   background-color: #FFF;
}

Das würde dein Problem erklären - und es wäre falsch. Nur der mit dem :not() gehört hinein, weil nämlich der ohne das :not ansonsten für alle tr in der example-Table zieht.

Rolf