Changing link color on focus but not on click (either mouse or keyboard click)

I want to change the color of a link when a user focuses on it by navigation to it using the TAB key. that's the easy part, as it's done by this:

a:focus{ color: red;}

Code (markup):

the problem is, the link is also colored red when activated, e.g: when a user clicks the "ENTER" key or the left mouse click.

How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ?

I tried this:

a:focus{ color: red;}
a:active{ color: blue;}

Code (markup):

(blue is the default color) it didn't work, what happens is it first turned the link blue but then red in a slit second...

I need this done of every link on my site so I don't want to use any complicated javascript code to do this and hoping to do this in CSS only.

any suggestions ?

 

Because when you click it with the mouse, it achieves :focus - your CSS is doing exactly what it's meant to do. If you want to NOT have this effect, only way to achieve it is via javascript.

 

TECHNICALLY:

:active -- it's clicked on and either scripting or the browser is processing it.

:focus -- it's been moved to by the keyboard

:hover -- the mouse is over it.

:visited -- you've followed it's href.

BUT -- some legacy browsers use :active for both keyboard AND it's currently clicked, which is why it's good practice to just use :active, :hover and :focus TOGETHER for the same state / effect.

Though what are you doing with it where it matters? Are you using it to intercept for scripttardery, or is it pointing to a link. If the latter it shouldn't be on screen long enough to matter, if the former, are you cancelling the event? Are you hooking with addEventListener and/or attachEvent, or are you using the stupid malfing "onevent" nonsense in the markup?

Either way if it's an anchor and it staying in the :active state makes ANY difference, it's likely you're doing something wrong somewhere else.... Also, check your value for :visited -- you might be seeing that instead.