Transition-Effekt bei "hover"

  • Habe die Menüleiste u.a. dahingehend modifiziert, dass ich zusätzliche Icons für die entsprechenden Menüpunkte hinzufügte. Desweiteren wird z.B bei "hover" über "Hilfe" ein hellgrauer Hintergrund eingeblendet (siehe code). Das geschieht durch einen Übergangseffekt (transition). Das funktioniert auch alles einwandfrei. Ich möchte jetzt aber noch zusätzlich folgendes bewirken: Bei Entfernen des Mauszeigers soll ebenfalls ein "transition"-Effekt in die Ausgangssituation (ohne hellgrauen Hintergrund) erfolgen :!: Was kannn man da machen?

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)

    Einmal editiert, zuletzt von Pentomino (2. Oktober 2018 um 12:13)

  • Durch "Googelei" und rumprobieren habe ich inzwischen eine Lösung gefunden:
    Der Ausdruck #helpMenu:not(:hover) bewirkt bei mir genau diesen "Ausblendeffekt", sobald der Mauszeiger das "Objekt" verlässt. Ich weiß allerdings nicht, ob das die einzige Möglichkeit darstellt. Habe irgendwo auch noch was von "ease-in-out" gelesen, blicke da aber nicht wirklich durch....

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)


  • Ich weiß allerdings nicht, ob das die einzige Möglichkeit darstellt. Habe irgendwo auch noch was von "ease-in-out" gelesen, blicke da aber nicht wirklich durch....

    Du schreibst die transition-Eigenschaft in die Regel ohne hover, vgl. Animation/transition (SELFHTML-Wiki): Das wirkt dann nicht nur auf :hover, sondern auch auf :active und (vermutlich) :focus, was hier erwünscht sein dürfte. Du findest im dortigen Beitrag auch was zu ease-in-out.

    Übrigens musst Du in die Regel für das Hover normalerweise nur das eintragen, was sich ändert. Hier sollte also das ausreichen (ungetestet):


    Beachte auch, dass ich „background-color” geschrieben habe. Ob sich das mit der Transition-Regel so verträgt, weiß ich jetzt nicht. Eventuell ist aber auch besser, vorher einen transparenten Hintergrund festzulegen und die Transition-Regel zu modifizieren.

  • Vielen Dank für die ausführlichen Hinweise und Erklärungen :klasse: Deine hier dargestellte "elegante" Version funktioniert bei mir perfekt und wie gewünscht :D Musste da nichts weiter anpassen. Es ist halt immer schwierig und sehr zeitaufwändig für jemanden, der praktisch null CSS-Kenntnisse besitzt, sich in diese ganzen Details "reinzufuchsen". Ich übernehme eigentlich immer nur "eure" Codes und passe hier und da etwas an. Dabei kommen dann bei mir häufig sehr umständliche "Monster" heraus. Deshalb bin ich umso dankbarer, wenn hier Spezialisten wie du am Werk sind, die mir viel Recherche abnehmen, die bei mir letztendlich selten zu einem zufriedenstellenden Ergebnis führt. Nochmals besten Dank :!:

    Lieber ein Narr sein auf eigene Faust, als ein Weiser nach fremdem Gutdünken ! (Nietzsche)