Enhance interactivity with CSS rollovers

CSS rollovers enable you to add the immediate user feedback of a color change when the visitor points to a hyperlink. Find out how this enhances the user experience on your Web site.

This article originally appeared as a Design and Usability Tactics e-newsletter.

By Michael Meadhra

The Web is about creating an interactive experience for the visitor, and the hyperlink is the most common tool for creating an opportunity for interaction between Web page and visitor. Hyperlinks enable visitors to choose what they'll see next.

From the earliest days of the Web, traditional hyperlinks have been displayed in a different color to distinguish them from regular text, and the color changes with the state of the link (i.e., normal, active, or visited). However, a traditional HTML hyperlink doesn't change color, or otherwise react when the visitor points to the link with the mouse. The pointer does change shape from an arrow to a pointing hand, but there's no change in the hyperlink itself.

CSS rollovers enable you to add the immediate user feedback of a color change when the visitor points to a hyperlink. This visual feedback reinforces the identification of the hyperlink as an interactive element of your Web page. It's a small detail of page design that makes a big difference in the user experience on your Web site.

Adding CSS rollovers to your Web page is a simple process—it only takes a few lines of code—and the technique is supported by all but the very oldest browsers. There's really no reason not to use CSS rollovers, yet it's surprising how many sites still don't take advantage of this simple technique.

What makes a CSS rollover work?

A CSS rollover works by using the formatting specifications in a Cascading Style Sheet to control the appearance of the text contained within the anchor tag (<a href="url">link text</a>) that defines a hypertext link. The rollover effect comes from the ability to define separate formatting for each state of a hyperlink. The four states are:

  • Link: regular (unvisited) hyperlink
  • Visited: a recently visited hyperlink
  • Active: a hyperlink that has been clicked but not yet displayed
  • Hover: a hyperlink under the mouse pointer (which is equivalent to the onMouseOver event)

You can control the color of the hyperlink text in the link, visited, and active states using attributes of the body tag. (Web development software, such as Dreamweaver, lets you select the hyperlink colors in the Page Properties dialog box instead of requiring you to manually edit the body tag.)

However, it's the hover state that is the key to the rollover effect; that's what enables the hyperlink to react to the mouse pointer passing over it. CSS formatting gives you access to the hover state and also opens up lots of other formatting possibilities in addition to simple color changes. For example, using CSS, you can set the font, weight, text decoration (underlines), background color, and more.

A CSS rollover example

The following sample code (which would go between the head tags of your Web page) shows an embedded CSS style sheet that implements the CSS rollover effect:

<style type="text/css">
a:link {
....font-weight: normal;
....color: #0033FF;
....text-decoration: underline}
a:visited {
....font-weight: normal;
....color: #990000;
....text-decoration: underline}
a:hover {
....font-weight: bold;
....color: #FF0000;
....text-decoration: none;
....background-color: #CCCCCC;
....border: 1px solid #000000;
....padding: 4px;
a:active {
....font-weight: bold;
....color: #FFFFFF;
....text-decoration: none;
....background-color: #990000;
....padding: 4px;
....border: 1px solid #000000;

You could also link to an external CSS style sheet file that contains the same style rules. The style rules define the formatting for the anchor (a) tag in each of its four states: link, visited, hover, and active.

This style sheet defines the normal link text as normal weight, dark blue color, with an underline. A hyperlink in the visited state is the same except for the color, which is maroon.

A hyperlink in the hover state gets very different formatting in this example. The style rule for a:hover specifies bold text, bright red in color, with no underline (text-decoration: none). In addition, the a:hover rule defines a light gray background color, which creates a box around the hyperlink text, complete with a one-pixel black border and four pixels of padding to separate the border from the text. A hyperlink in the active state gets the same formatting as the hover state except for different colors for the text (white) and background color (maroon).

Note: The formatting in this example is designed to illustrate some of the capabilities of the CSS rollover technique. I don't necessarily recommend these settings for use on a typical Web page.

Using CSS rollovers is one of the simplest ways to enhance the interactivity of your Web pages. Today's Web site visitors expect a higher level of interactivity than ever before, and CSS rollovers are an easy way to add an extra measure of visual feedback to the most common interactive element on most Web pages. Also, the technique works without requiring large graphic files and scripts, so it's as fast and efficient for the Web browser as it is for the Web builder.

Michael Meadhra has been working in the IT field since the earliest days of the Web. His book credits span some three dozen titles, including How to Do Everything with Dreamweaver MX.

Editor's Picks