Czy mogę zastosować przejście CSS tylko na hover-out?

Question

Obiekt przejściowy CSS pozwala animować zarówno hover w & najechania-out, jeśli umieścić przejście jak poniżej:

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

Jednakże, jeżeli przejście zostanie przeniesiona do :hover stanie, zdarza się tylko na hover- w.

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

Czy można wykonać czynność odwrotną, tzn. Animować tylko najechanie?

Answer 1

Oto jeden ze sposobów osiągnięcia tego celu (umieścić bogus własność none nieruchomości przejściowego w :hover):

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

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

Odpowiedź zaktualizowana do włączenia @ sugestią BoltClock użytkownika. Umieszczenie none zamiast fałszywej własności jest zdecydowanie bardziej eleganckie.

Answer 2

Jeśli nie chcesz, aby określić właściwość transition więcej niż jeden raz, można zastosować przejście do :not(:hover), but the caveat is that you need to swap all of the other declarations as well:

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

Każda z nich będzie działać, ale jeśli nie chcemy mieć do czynienia z mylące inwersje, pozostań przy nadpisywaniu przez transition: none.

Należy również zauważyć, że CSS selectors represent states and not events, co oznacza, że ​​wykorzystuje stan :hover zamiast zdarzeń mouseover i mouseout; jednak przejście z :hover do :not(:hover) jest zasadniczo sposobem CSS wyrażania animacji mouseout.