Unterschiedliche Übergänge für Hover Ein / Hover Aus

Mit anderen Worten: „Unterschiedliche Übergänge bei mouseenter und mouseleave“, da dies die DOM-Ereignisse sind, die auftreten, aber wir verwenden hier kein JavaScript, wir sprechen über den CSS :hover-Zustand und CSS3-Übergänge. Hover ein, eine CSS-Eigenschaft animiert sich zu einem neuen Wert; Hover aus, eine andere CSS-Eigenschaft animiert sich.

Das ist ein einfacher Trick. Sie setzen Übergänge für beide Zustände, so:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Wenn Sie darüber schweben, überschreibt der :hover-Übergang den im regulären Zustand gesetzten Übergang und diese Eigenschaft wird animiert. Wenn Sie den Mauszeiger wegziehen, übernimmt der Übergang aus dem regulären Zustand und diese Eigenschaft wird animiert.

Und hier nun ein beleidigend lahmes Beispiel, das Sie niemals verwenden sollten

Demo ansehen