Posso applicare una transizione CSS solo al passaggio del mouse?

Question

La proprietà di transizione CSS consente di animare sia su hover-in & hover-out se si mette la transizione, come di seguito:

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

Tuttavia, se la transizione viene spostato :hover Stato, succede solo su hover- in.

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

È possibile fare il contrario, cioè animare solo al passaggio del mouse?

Answer 1

Ecco un modo per raggiungere questo obiettivo (mettere una proprietànone bogus per la proprietà di transizione in :hover):

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

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

risposta aggiornato per integrare @ suggerimento di BoltClock. Mettere none invece di una proprietà fasulla è decisamente più elegante.

Answer 2

Se si preferisce non specificare la proprietà transition più di una volta, è possibile applicare la transizione a :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; 
} 

Uno di questi funzionerà, ma se non si vuole affrontare inversioni confuse, continuare a ignorare tramite transition: none.

Si noti inoltre che CSS selectors represent states and not events, che significa che utilizza uno stato :hover anziché gli eventi mouseover e mouseout; tuttavia, una transizione da :hover a :not(:hover) è essenzialmente il modo CSS di esprimere un'animazione mouseout.