A popular approach is to add a background color on hover (see Example 10-2).
Example 10-2. Adding a background color to the hover state
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; background-color: white;}
a:active {color: red;}
As the mouse passes over the link, the background turns white (see Figure 10-3).
Figure 10-3. Changing the background color in a hover state.
You can also modify the text weight by making it bold, or change its style and make it italic (see Example 10-3).
Example 10-3. Adding a background color to the hover state
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; font-style: italic;}
a:active {color: red;}
NOTE
Many usability specialists suggest avoiding major changes in link state styles because they feel it's disconcerting. Some very rigid usability experts advocate not even styling links and leaving them with their default colors and underlines. Most designers do not agree with the more rigid approach, though, and prefer to use link styles to enhance their design work. The main concern is ensuring that there's some way for a visitor to know that the link is, in fact, a link.
As the mouse passes over the link, the background turns italic (see Figure 10-4).
Figure 10-4. Modifying the text style to italic in the hover state.
Perhaps the most popular modification is removing the link underline. You can do this for all states with the text-decoration: none; declaration:
a {color: orange; text-decoration: none;}
As I mentioned, common styles to all states should be placed in the anchor element so you can tap into inheritance. There's no need to add this declaration to any of the pseudo selectors because they'll inherit the rule (see Figure 10-5).
Figure 10-5. Look, Mano underlines!
You can mix and match rules, too. Some designers like to have the underline appear only in the hover state. To do that, you simply add the text-decoration: underline; declaration to the :hover selector, which overrides the inherited value in the anchor because of the specificity of the selectors (see tutorial 7, "Using CSS," for more details on specificity). Figure 10-6 shows the links without underlines until the hover state is activated.
Figure 10-6. The link, visited, hover, and active states, with underlining in the hover state.
