Change rollover effects by changing the order of CSS styles

You're probably already aware that you can create CSS rollover effects by defining separate styles for each state of the linkââ,¬"link (normal), visited, hover, and active (clicked). And, you probably also know that the order of the CSS styles makes a difference; styles that come later in the CSS code override earlier styles that apply to the same element. The sequence of the styles that create the rollover effect is particularly significant.

Let's take a look at how to arrange the link-state styles to support the normal rollover effect without conflicts, and also how to rearrange those styles to achieve variations on the rollover effect.

Link states, by the book
The typical CSS rollover effect relies on separate styles for each of the four states of a hyperlink. You create styles for the <a> (hyperlink) tag with CSS pseudoclasses to address the states.

• a:linkââ,¬"normal, unvisited hyperlink
• a:visitedââ,¬"visited hyperlink
• a:hoverââ,¬"hyperlink as the visitor's cursor passes over it
• a:activeââ,¬"clicked hyperlink

For the typical CSS rollover effect to work properly, it's important that the CSS styles come in this particular order in the CSS code, whether it's an external stylesheet or style rules embedded in the header of the HTML page.

The a:link style comes first because it applies to all links. The a:visited style is next; it overrides the formatting of the a:link style for any visited links. (If the a:link style followed a:visited, the a:link style might override the a:visited style.) The a:hover style is next; it applies only to the link under the visitor's cursor. The a:active style is last so it can override all others when a link is clicked.

The following CSS creates the rollover effect shown in Figure A.

a:link {
    color: #0000FF;
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
}
a:visited {
    color: #3399FF;
    text-decoration: underline;
    background-color: #FFFFFF;
    font-weight: normal;
    font-style: italic;
}
a:hover {
    color: #0000FF;
    text-decoration: underline;
    background-color: #FFFF00;
    font-weight: bold;
    font-style: normal;
}
a:active {
    color: #FF0000;
    text-decoration: none;
    background-color: #CCCCCC;
    font-weight: bold;
    font-style: normal;
}

The sequence of styles in the CSS code establishes how each style takes precedence over others, where more than one style could apply to a specific element. The a:hover style normally follows both the a:link and a:visited styles so the styling for the hover state can apply to both regular and visited links. However, it doesn't have to be that way. You can alter the order of the styles to achieve different effects.

Suppose you want a rollover effect on unvisited links, but don't want the effect to apply to visited links. You might think you'd need a script to handle such situational formatting, but all you really need to do is rearrange the CSS code.

To remove the rollover effect from visited links, simply move the a:visited style so that it follows the a:hover style instead of preceding it. Changing the order of the styles in the CSS code shown below changes the rollover effect on visited links, as shown in Figure B.

a:link {
    color: #0000FF;
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
}
a:hover {
    color: #0000FF;
    text-decoration: underline;
    background-color: #FFFF00;
    font-weight: bold;
    font-style: normal;
}
a:visited {
    color: #3399FF;
    text-decoration: underline;
    background-color: #FFFFFF;
    font-style: italic;
    font-weight: normal;
}
a:active {
    color: #FF0000;
    text-decoration: none;
    background-color: #CCCCCC;
    font-weight: bold;
    font-style: normal;
}

Notice that the a:visited style includes rules to define all the same attributes as the a:hover style. Otherwise, any attributes of the a:hover style that weren't specifically overridden by the a:visited style would continue to appear when the visitor's cursor passed over a visited link.

Adding another wrinkle
The fact that previous styles continue to apply to an element unless specifically overridden by a subsequent style creates another opportunity for altering the normal rollover effect. Careful selection of the attributes and order of the link-state styles can enable you to create somewhat different rollover effects for unvisited and visited links.

For example, simply deleting the background-color: #FFFFFF; rule from the a:visited style in the second code example above would allow the background color from the a:hover style to apply to visited links. The result is a rollover effect for unvisited links that adds a background colour and makes the text bold. The rollover for visited links, on the other hand, includes the same background colour change, but the text retains the style and weight of the visited links (see Figure C).