KillerKalle: Underline Animation

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

  1. @@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

    --
    „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
    1. 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 😜

      1. 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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. 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

          --
          Keyboard error or no keyboard present. Press F1 to continue.
          1. 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

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            1. 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

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              1. 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

                --
                Keyboard error or no keyboard present. Press F1 to continue.
          2. Tatsächlich sagt man das in Thüringen auch so und nicht anderst 😉

            1. @@KillerKalle

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

              Anderste Länder, anderste Sitten.

              😷 LLAP

              --
              „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
          3. 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

            --
            Keyboard error or no keyboard present. Press F1 to continue.
            1. 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

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  2. 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

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    1. @@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

      --
      „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
    2. 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

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    3. 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👍

  3. @@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

    --
    „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
    1. Hallo Gunnar,

      Nutzerinnen

      Ich fühle mich diskriminiert!

      Rolf

      --
      sumpsi - posui - obstruxi
      1. @@Rolf B

        Nutzerinnen

        Ich fühle mich diskriminiert!

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

        😷 LLAP

        --
        „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
        1. 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

          --
          Keyboard error or no keyboard present. Press F1 to continue.
          1. 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

            --
            Keyboard error or no keyboard present. Press F1 to continue.

            1. Fast. ↩︎

        2. 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

          --
          sumpsi - posui - obstruxi