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;
}
GEEKSPEAKThe 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. |
Figure 60.1. With the hover pseudo-class, you can create links that change appearance when the visitor mouses over them.
[View full size image]
TIPSome 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. |
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.
[View full size image]