Warum verhält sich ein CSS-Übergang mit Easy-In-Out beim Schweben reibungslos, beim Mouse-Out jedoch abrupt?

CSS-Übergang-Ease-In-Ease-Out-Rätsel

Beim Anwenden eines Übergangs auf ein Element unter Verwendung der all-Eigenschaft und einer Ease-in- Wenn Sie die Beschleunigungsfunktion verwenden, wie in der Beispielgeige (http://jsfiddle.net/garethweaver/Y4Buy/1/) zu sehen ist, erfolgt ein reibungsloser Übergang des Elements, wenn Sie mit der Maus darüber fahren. Allerdings schnappt es beim Mouseout abrupt zurück. Es stellt sich die Frage, warum dies auftritt und wie es behoben werden kann.

Die Lösung liegt darin, das Basiselement und nicht nur die :hover-Pseudoklasse für Übergangseigenschaften anzusprechen. Durch die Definition des Übergangs am Element selbst gilt dieser sowohl beim Betreten als auch beim Verlassen des Hover-Zustands.

Aktualisiertes Beispiel

Der korrigierte CSS-Code:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}</code>

Mit dieser Änderung verläuft das Bild jetzt reibungslos in beide Richtungen, d. h. beim Bewegen des Mauszeigers nach innen und beim Verlassen des Bildbereichs mit der Maus.

Das obige ist der detaillierte Inhalt vonWarum verhält sich ein CSS-Übergang mit Easy-In-Out beim Schweben reibungslos, beim Mouse-Out jedoch abrupt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!