This article originally
appeared in the Design & Usability Tactics newsletter. Click
here
to subscribe automatically.

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;
}

Variations on a theme

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 color and makes the text bold. The rollover for
visited links, on the other hand, includes the same background color change,
but the text retains the style and weight of the visited links (see Figure C).