Applicare le transizioni su: non hover: attiva

Question

io non sono sicuro se è possibile, ma qui è quello che ho fatto:

a { 
    background-color: white; 
    transition: all 1s; 
} 

a:hover { 
    background-color: grey; 
} 

a:active { 
    background-color: black; 
} 

Ma vorrei le transizioni di non applicare sul: attiva (solo su la: hover), ho provato questo:

a { 
    background-color: white; 
} 

a:hover { 
    background-color: grey; 
    transition: all 1s; 
} 

a:active { 
    background-color: black; 
} 

E il risultato è esattamente lo stesso (tranne che l'effetto non è invertita). È possibile farlo in tutto il CSS.

Grazie!

Answer 1

a { 
    background-color: white; 
    transition: all 1s; 
} 

a:hover { 
    background-color: grey; 
} 

a:active { 
    background-color: black; 
    transition: none; 
} 

markup:

<menu type=list> 
    <li><a>home</a></li> 
    <li><a>work</a></li> 
    <li><a>contact</a></li> 
    <li><a>about</a></li> 
</menu> 

demo: http://jsfiddle.net/7nwLF/