Underline Animation

[KillerKalle]

Hallo, Ich möchte für meine Webseite eine kleine animation im menü machen. Dafür habe ich folgendes snippet:

https://codepen.io/KillerKalle/pen/XWKEQjz

Ich habe nur das problem, dass ich es nicht hinbekomme, dass die animation nur bei der überschrift startet, über die ich hover. Ich weiß, dass es daran liegt, dass sie in einem div liegen, aber wenn ich die klasse im div änder und alles im css anpasse, dann geht die animation gar nicht mehr.

Kann mir jemand helfen?

Beste Grüße Pascal

[Gunnar Bittersmann]

@@KillerKalle

https://codepen.io/KillerKalle/pen/XWKEQjz

Ich habe nur das problem, dass ich es nicht hinbekomme, dass die animation nur bei der überschrift startet, über die ich hover.

Was für eine Überschrift? Ich sehe da nur divs und spans.

.underline_on_hover:hover .hover:before, .underline_on_hover:hover .hover:after`

Damit selektierst du die Pseudoelemente aller Elemente der Klasse hover (ziemlich unsinnige Benennung, BTW), die sich innerhalb eines gehoverten Elements der Klasse underline_on_hover befinden – also beider.

Du willst stattdessen auf :hover jedes einzelnen Elements der Klasse hover reagieren:

.hover:hover::before, .hover:hover::after

Und ja: Pseudoklassen mit einem Doppelpunkt, Pseudoelemente mit zweien.

😷 LLAP

[KillerKalle]

Danke, für die super schnelle und korrekte Lösung.

Ich habe das einfach schnell in codepan nachgeschrieben und da kein extra Menü gemacht, weil ich wordpress nutze und nur das css anpassen wollte. Dort sind dann auch die namen für hover usw anderst 😜

[Matthias Apsel]

Hallo KillerKalle,

Ich habe das einfach schnell in codepan nachgeschrieben

Stift, nicht Pfanne. 😜

Dort sind dann auch die namen für hover usw anderst

Oh, ein Anhaltiner.

Bis demnächst
Matthias

[Der Martin]

Hallo Matthias,

Ich habe das einfach schnell in codepan nachgeschrieben

Stift, nicht Pfanne. 😜

hehe, gut auf den Punkt gebracht. 😀

Dort sind dann auch die namen für hover usw anderst

Oh, ein Anhaltiner.

Nicht unbedingt. Im Raum Würzburg scheint anderst auch üblich zu sein, und in ein paar weiteren Regionen bestimmt auch.

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Oh, ein Anhaltiner.

Nicht unbedingt. Im Raum Würzburg scheint anderst auch üblich zu sein, und in ein paar weiteren Regionen bestimmt auch.

Ja, ich meine mich zu erinnern, dass wir genau diese Diskussion schon mal hatten.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Ja, ich meine mich zu erinnern, dass wir genau diese Diskussion schon mal hatten.

7 Jahre ist es her.

Bis demnächst
Matthias

[Der Martin]

Hallo,

Ja, ich meine mich zu erinnern, dass wir genau diese Diskussion schon mal hatten.

7 Jahre ist es her.

das liegt weit jenseits der Halbwertszeit meines Gedächtnisses für Trivia.

Live long and pros healthy,
 Martin

[KillerKalle]

Tatsächlich sagt man das in Thüringen auch so und nicht anderst 😉

[Gunnar Bittersmann]

@@KillerKalle

Tatsächlich sagt man das in Thüringen auch so und nicht anderst 😉

Anderste Länder, anderste Sitten.

😷 LLAP

[Der Martin]

Hallo,

Im Raum Würzburg scheint anderst auch üblich zu sein, und in ein paar weiteren Regionen bestimmt auch.

ich erinnere mich gerade an einen früheren Kollegen, der gern annerster sagte.
Aber ich habe keine Ahnung, aus welcher Gegend der kam.

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Der Martin,

ich erinnere mich gerade an einen früheren Kollegen, der gern annerster sagte.
Aber ich habe keine Ahnung, aus welcher Gegend der kam.

Das kenne ich aus der Oberlausitz, dort aber annerscher.

Bis demnächst
Matthias

[Henry]

Hallo KillerKalle,

Ich habe nur das problem, dass ich es nicht hinbekomme, dass die animation nur bei der überschrift startet, über die ich hover.

Dein Problem ist grösser als du vermutest. Was nutzt dir hover bei mobilen devices, zb. Handy, deren Nutzung > 85% beträgt?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Dein Problem ist grösser als du vermutest.

Aber auch nicht so groß wie du vermutest.

Was nutzt dir hover bei mobilen devices, zb. Handy, deren Nutzung > 85% beträgt?

Wo ist das Problem, wenn Nutzerinnen diesen Hoverschnickschnack nicht zu sehen bekommen?

😷 LLAP

[Matthias Apsel]

Hallo Henry,

Dein Problem ist grösser als du vermutest. Was nutzt dir hover bei mobilen devices, zb. Handy, deren Nutzung > 85% beträgt?

Sollte man deshalb komplett auf die Pseudoklasse hover verzichten?

Bis demnächst
Matthias

[KillerKalle]

Also so ein großer Anfänger bin ich dann auch nicht ;)

Ich habe ja ein anderes Layout für mobile Endgeräte. Das ist nur für Desktops, aber danke für den Hinweis👍

[Gunnar Bittersmann]

@@KillerKalle

Ich möchte für meine Webseite eine kleine animation im menü machen.

Die sollte in ein Media-Query @media (prefers-reduced-motion: no-preference) gekapselt werden, damit bei Nutzerinnen nichts rumzappelt, wenn sie explizit abgeben, dass sie keine Rumzappelei möchten.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Nutzerinnen

Ich fühle mich diskriminiert!

Rolf

[Gunnar Bittersmann]

@@Rolf B

Nutzerinnen

Ich fühle mich diskriminiert!

Generisches Femininum. Männliche und diverse Nutzerinnen sind mitgemeint.

😷 LLAP

[Der Martin]

Hallo,

Nutzerinnen

Ich fühle mich diskriminiert!

Generisches Femininum. Männliche und diverse Nutzerinnen sind mitgemeint.

männlich sein ist sowieso nur ein Gendefekt: Ein kaputtes X-Chromosom.

Live long and pros healthy,
 Martin

[Der Martin]

Hi,

männlich sein ist sowieso nur ein Gendefekt: Ein kaputtes X-Chromosom.

fun fact am Rande: Bei Katzen liegt ein Teil der Gene, die für die Fellfarbe verantwortlich sind, eben auf dem X-Chromosom. Deshalb kann man bei Katzen, deren Fell mehr als zwei verschiedene Farben hat (z.B. getigert mit weißen Flecken), fast^[1] sicher davon ausgehen, dass es sich um ein Weibchen handelt.

Live long and pros healthy,
 Martin

---

1. Fast. ↩︎

[Rolf B]

Hallo Gunnar,

das habe ich durchaus verstanden. Ich bin ein Mann, aber deswegen nicht blöd. Auch wenn Frauen das möglicherweise unterstellen.

Und ich fühle mich durch ein generisches Femininum diskriminiert. Wenn ein generisches Maskulinum die Frauen diskriminiert, dann diskriminiert ein generisches Femininum die Männer. Auch dann, wenn ein Mann es verwendet.

Rolf
der ironische