::after und ::before bei :hover

  • ich bin ein bisschen Verwirrt: doe psedoklassen ::after und ::before funktionieren bei mir aus irgend welchen gründen nicht, während :hover selbst funktioniert.

    Daran das ich mit "element" ein eigenes html element definiert habe, scheint es nicht zu liegen. Als Klasse mit p.element habe ich es ebenfalls getestet: klappt nicht.

    Hat jemand eine Idee woran das liegt?


    Danke schonmal im Voraus!


  • after und before brauchen meines wissens auch immer content:'';

    schreib das mal dazu

    Code
    section#innerbody element:hover::after  {
      content:'';
        border: 40px solid blue;
        background-color: #899;
        width:400px;
        animation-duration: 2s;
        animation-name: achter;    
        
    }

    dann sollte schon was kommen

  • Zunächst sollte aber ein section#innerbody element::after (mit content: "";) definiert werden und dann das :hover.

    Mal nee blöde Frage dazu, muß man das machen ? ( valides css ? )

    Habe sein Code mal getestet und gehen tut ja beides. ( mit definieren , oder alles mit hover erstellen )


    Er sollte nur dran denken das er auch display:block benutzt weil die 400 Pixel breite sonst nicht angezeigt werden. ( zumindest hier im opera )

  • Hey cool, vielen Dank!!!

    Ich saß vorhin ziemlich lang an dem Problem und hab alles mögliche von w3schools gelesen. Ich weiß nicht wie lang ich gebraucht hätte, das rauszufinden!


    Und klar, natürlich ist valides css sehr wichtig, danke für den Hinweis. Block benutze ich ebenso in section#innerbody {}. Kompatibilität ist mir sehr wichtig.

  • Mal nee blöde Frage dazu, muß man das machen ? ( valides css ? )

    Ganz ehrlich... ich habe keine Ahnung! Nur irgendwas in dem Verständnis, das ich von CSS habe, sträubt sich gegen eine solche Vorgehensweise - habe es allerdings noch nicht selber ausprobiert, ob da beim hovern aus dem nichts ein ::after auftaucht(???)

    Mich stört allerdings auch die Keyframe Animation! Die würde ich komplett weg lassen und den Hover-Effekt auch mit :hover realisieren.

    Gab hier im Forum unlängst mal ein ähnliches Problem...

    CSS Hover effekt

    vielleicht hilft das ja auch weiter.

  • zu der Frage nach validem CSS: Das ist ein Glaubenskrieg. Alles hat Vor- und Nachteile und es kommt drauf an, was man erreichen möchte.
    CSS2 hat ::pseudoelement. CSS3 supportet :pseudoelement.

    Die größte validität ist mit ::after erreicht.

    Die größte browser-kompatibilität mit :after.


    Das ist zumindest so, wie ich nach meinen 11 Jahren Webentwicklungspause nun herausgefunden habe.


    Keyframe vs. transition: Danke für den Hinweis, ich habe gerade mal nachgelesen was der Unterschied zwischen transition und keyframes ist. Hat beides vor und nachteile, hier reicht definitiv eine transition.

  • ps. das eigentliche Problem war eine Menuanimation. Ich habe zum testen ob mein css klappt nur schnell eine neue seite geschrieben, um mit pseudoklassen und hover zu experimentieren.

    Mein Problem habe ich nun auch Dank dieses Forums hier gelöst.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!