Zastosuj przejścia na: hover nie: aktywny

Question

Nie jestem pewien, czy jest to możliwe, ale tutaj jest to, co robiłam:

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

a:hover { 
    background-color: grey; 
} 

a:active { 
    background-color: black; 
} 

Ale chciałbym przejścia nie stosuje się na: aktywne (tylko na the: hover), próbowałem tego:

a { 
    background-color: white; 
} 

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

a:active { 
    background-color: black; 
} 

A wynik jest dokładnie taki sam (z tym wyjątkiem, że efekt nie jest odwrócony). Czy można to zrobić w pełnym CSS.

Dzięki!

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/