Chapter 60. Making Rollover Hyperlinks

In Topic 59, you looked at three CSS pseudo-classeslink, visited, and activeand you saw how they correspond to the three link states of HTML. CSS adds a fourth link state: the hover state, which describes a link when the visitor rolls over it with the mouse pointer. Another link state means another CSS pseudo-class, and another pseudo-class means another opportunity to create a custom style.

The following style sheet includes a rule for the hover state:

 a {   font-weight: bold;   text-decoration: none; } a:hover {   text-decoration: underline; } 

GEEKSPEAK

The hover state describes a link when the visitor rolls over it with the mouse pointer. Use the hover pseudo-class to create rollover styles for hyperlinks in CSS.

As you can see in Figure 60.1, links appear in boldface without an underline by default, thanks to the general style rule that governs all anchor tags. But when the visitor hovers over a link, the special style rule that applies only to rollovers kicks in, and the underline appears.

Figure 60.1. With the hover pseudo-class, you can create links that change appearance when the visitor mouses over them.

Notice that you don't have to include boldface in the style rule for the hover state. Everything in the general style for anchor tags automatically applies to the pseudo-classes. So, when you write style rules for the link states, just include definitions for the extra formatting that you want to apply, including contradictions or changes to the general rules (like going from normal weight in regular links to boldface in rollovers). You don't have to repeat yourself for the style definitions that remain the same from state to state.

TIP

Some designers like to create link rollovers where the links have underlines by default, and rolling over the links causes the underlines to disappear. While this strategy makes sense in that the default underline helps the visitor to figure out which items on the page are hyperlinks, it doesn't make sense in that a rollover should go from a lower-energy state to a higher-energy state. Psychologically speaking, this is what the visitor expects. When the underline goes away, the link seems to be shutting offit goes from a higher-energy state to a lower-energy state. Some visitors might conclude that the links aren't active after all.

If you don't want to remove the underline by default, then don't remove the underline in the rollover state. Find some other way to style the rollover, like going from normal weight to boldface or adding a background color. Whatever the style, the rollover link should look like it's powering up, not shutting down.

The hover style can include any CSS that applies to text. Therefore, a link rollover can increase in size or weight, change style, change color; change decoration, and so on. Just be careful about altering the default link too much. If the hover link doesn't fit in the same amount of space as the default link, the browser redraws the entire page on rollover, as in Figure 60.2, which may confuse your visitors or even make them motion-sick.

Figure 60.2. Compare this figure with Figure 60.1, and you see that the browser redraws the page to accommodate this extreme rollover style.