Kann ich einen CSS-Übergang nur auf Hover-Out anwenden?

Question

Die CSS Übergang Eigenschaft können Sie auf beide Hover-in & Hover-out animieren, wenn Sie den Übergang, wie unten setzen:

#inner{ 
    opacity:0; 
    transition:opacity 2000ms; 
} 
#outer:hover #inner{ 
    opacity:1; 
} 

Wenn jedoch der Übergang zu :hover Zustand bewegt wird, es geschieht nur auf hover- im.

#inner{ 
    opacity:0; 
} 
#outer:hover #inner{ 
    opacity:1; 
    transition:opacity 2000ms; 
} 

Ist es möglich, das Gegenteil zu tun, d. H. Animieren nur bei Hover-Out?

Answer 1

Hier ist ein Weg, dies zu erreichen (bitte eine bogus Eigenschaft none für den Übergang Immobilien in :hover):

#inner2{ 
    opacity:0; 
    transition:opacity 2000ms; 
} 
#outer:hover #inner2{ 
    opacity:1; 
    transition:none; 
} 

http://jsfiddle.net/j716sbav/4/

Antwort aktualisiert @ Vorschlag des BoltClock zu integrieren. Putting none anstelle einer gefälschten Eigenschaft ist definitiv eleganter.

Answer 2

Wenn Sie nicht lieber die transition Eigenschaft mehr als einmal angeben, können Sie den Übergang zu :not(:hover), but the caveat is that you need to swap all of the other declarations as well gelten:

#inner2{ 
    opacity:1; 
} 
#outer:not(:hover) #inner2{ 
    opacity:0; 
    transition:opacity 2000ms; 
} 

Beides wird funktionieren, aber wenn Sie wollen nicht behandeln verwirrende Inversionen, bleiben Sie beim Überschreiben über transition: none.

Beachten Sie auch, dass CSS selectors represent states and not events, was bedeutet, dass es einen :hover Zustand statt mouseover und mouseout Ereignisse verwendet; Ein Übergang von :hover zu :not(:hover) ist jedoch im Wesentlichen die CSS-Methode zum Ausdrücken einer Mouseout-Animation.