Web Design in a Nutshell, 3rd Edition

Image Rollovers

Image rollovers work on the same principle as described in the previous examples, only the value of background-image is changed for the hover state. Again, because Internet Explorer 6 and earlier support :hover on the a element only, a link is used in this example.

This example style sheet applies a background image (button.gif) to all links in a document. The a element is set to display as a block so that width and height values (matching the image dimensions) can be applied to it. The a:hover rule specifies a different background image (button_over.gif) to display when the mouse is over the link (Figure 24-13).

Changing Styles on “Focus”

For users who navigate web sites using the keyboard alone, it is common to tab from link to link rather than “mousing” over it. When a link is activated in this manner, it is said to have focus (the same as form controls that are activated and ready for user input). The :focus pseudoclass selector allows authors to apply a style to a link (or form control) when it is in focus. The added visual cue aids in accessibility for keyboard users.

When specifying styles for the focus state, the pseudoclass selectors must appear in the style sheet in the following order: :link, :visited, :focus, :hover, :active.

Unfortunately, Internet Explorer (Version 6 and earlier for Windows) does not support the :focus selector, so the effect will be lost for users of those browsers. The :active selector may be used instead.

 a { display: block; /* allows ...