Apply transitions on :hover not :active

Question

I'm not sure if it's possible, but here is what I did:

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

a:hover {
    background-color: grey;
}

a:active {
    background-color: black;
}

But I would like the transitions not to apply on the :active (just on the :hover), I tried this:

a {
    background-color: white;
}

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

a:active {
    background-color: black;
}

And the result is exactly the same (except that the effect is not reversed). Is it possible to do it in full CSS.

Thanks!

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/