Is there a way to change the color of a link only when a user navigates to it using the TAB key and not when they click on it? The simple CSS solution I found was:
a:focus { color: red; }
However, this also changes the color when the link is activated by clicking on it. How can I prevent this while still maintaining the desired behavior with the TAB key?
I attempted to use the following code:
a:focus{ color: red; }
a:active{ color: blue; }
Initially, this set the link color to blue but then quickly switched it to red.
Since I need this functionality for all links on my site without resorting to complex JavaScript, I am looking for a pure CSS solution. Any ideas or suggestions?
Update: I also experimented with:
a:active:focus{ color: blue; }
This was an attempt to capture the "focused" and "active" states simultaneously in order to override the focus CSS. However, this approach did not work as intended.