css3 - Apply transitions on :hover not :active -

i'm not sure if it's possible, here did:

a {     background-color: white;     transition: 1s; }  a:hover {     background-color: grey; }  a:active {     background-color: black; } 

but transitions not apply on :active (just on :hover), tried this:

a {     background-color: white; }  a:hover {     background-color: grey;     transition: 1s; }  a:active {     background-color: black; } 

and result same (except effect not reversed). possible in full css.

thanks!

a {     background-color: white;     transition: 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/