auf Übergänge Nehmen: schweben nicht: aktiv

Question

Ich bin nicht sicher, ob es möglich ist, aber hier ist das, was ich getan habe:

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

a:hover { 
    background-color: grey; 
} 

a:active { 
    background-color: black; 
} 

Aber ich würde die Übergänge nicht wie auf dem anwenden: aktiv (nur auf der: hover), habe ich versucht, dies:

a { 
    background-color: white; 
} 

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

a:active { 
    background-color: black; 
} 

Und das Ergebnis ist genau das gleiche (mit Ausnahme, dass der Effekt nicht mehr rückgängig gemacht wird). Ist es möglich, es in vollem CSS zu tun?

Danke!

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/