Web Design in a Nutshell, 3rd Edition

Text Rollovers

A rollover can be used to change any aspect of an element’s appearance. You can change the size or color of the text, its background color, its decoration, or virtually any property that can be used to style text. Figure 24-12 shows just a few examples. Styles are applied to the a element, and an alternate style is specified with the a:hover selector for the rollover state.

Remember, to work correctly, the pseudoclass selectors must appear in the style sheet in the following order: :link, :visited, :hover, :active (think LVHA, or “Love, Ha!”).

In all three examples, the default link is set in gray text with its underline turned off using this rule.

Figure 24-12. Examples of text rollover effects on links

    a:link {
        text-decoration: none;
        color: #666;
        }

In Example 1, the rollover changes the link to black and makes the underline appear.

    a:hover {
        text-decoration: underline;
        color: #000; }

Example 2 demonstrates a popular technique of using a fancy bottom border instead of the generic underline. A little padding is added to give the link enough space.

    a:hover {
        text-decoration: none;
        color: #000;
        padding-bottom: 2px;
        border-bottom: dotted 2px #999; }

In Example 3, both the foreground and background colors change on rollover. A border is thrown in for good measure.

    a:hover {
        text-decoration: none;
        color: #FFF;
        padding: 2px;
        background-color: #666;
        border: solid 1px black; }