CODEWITHSUNDEEP
cssfirefoxpseudo-class
crezc3nt
crezc3nt

Reputation: 313

Pseudo-class :active not working correctly in firefox

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.

Upvotes: 7

Views: 7140

Answers (2)

Pedro Norwego
Pedro Norwego

Reputation: 131

I would instead use: a:hover:focus. You get a new background-color when hovering, and a new link text color when clicking (focusing). And if you just downclick the link, and then pull the mouse away before upclicking, the new link text color will disappear.

Upvotes: 0

tuff
tuff

Reputation: 5163

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.

Upvotes: 2

Related Questions