Pseudo-class :active not working correctly in firefox

Question

CSS:

a:link { color: green;}
a:active {color: orange;}

HTML:

<a href="#">testing</a>

Here is JSFiddle

Pseudo-class :active still active after mouse button is clicked on the link, dragged away and released. How to make the link color return to normal after release the mouse button?

I'm using Firefox 14. It works fine in Chrome.

Answer 1

If you set your "active" colour on :focus:hover it will have the closest effect to what you want, although it won't be exactly the same as in Chrome in that the colour you set will appear when the link is focused and hovered but not when the mouse button is down.

However, if the thing you dislike most is that the "active" colour remains after the mouse is released, you can at least prevent that from happening by setting your "normal" link colour on :focus. The link does remain focused after it's been clicked, dragged off, and released - you can test this by doing it then pressing enter.

You may find examples (and information) on this page - note the link colours when you hold and release the mouse; they correspond to the a:hover, a:focus, a:focus:hover, and a:active rules for that page.