Code Snippet
Link Pseudo-Classes (In Order)
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}Link, Visited, Hover, Active
L, V, H, A
LoVe, HAte
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}Link, Visited, Hover, Active
L, V, H, A
LoVe, HAte
Note that hover won’t work for people who use a keyboard rather than a mouse.
In order to make this effect keyboard-accessible, you must also use the focus pseudo class. This class is activated when the user tabs to a link.
When you don’t include the focus pseudo class and use outline: 0; on your links, keyboard users won’t even be able to see which link is activated at all, which results in bad usability for keyboard users.
a:focus {color: green;}Most of the time it makes sense to apply the same styles to both hover and focus, in order to make sure both mouse users and keyboard users will see the same effect.
Further you can ensure better cross-browser compatibility for the effect (because Internet Explorer handles pseudo classes differently) by adding also the active pseudo class. A link becomes active a short time when the user is actually clicking on the link.
a:hover,a:focus,
a:active {color:red;}
The active pseudo class can also be used to create a special button pressing effect during the short time when the user is clicking on the link.
By moving the link 1 pixel to the right and 1 pixel down it will appear that the link is being pushed like a button when clicked.
a:active {position:relative;top:1px;left:1px;}Is the point of :link to simply style anything with the href attribute? For example, it would not affect something like
Test