CSS Tutorial by Paul Bohman

• CSS Pseudo Class Special Effects |
• Media Types

Hover, Focus, and Active Pseudo Classes

Some of the most useful "pseudo classes" consist of the following types: hover, focus, and active. When applied to links, you can create special effects on links that are activated when the mouse "hovers" over them, or when you tab to links, or when you are in the act of clicking on a link. Technically, these pseudo classes can be applied to any element -- not just links -- but poor browser support in Internet Explorer limits the usefulness of hover, focus, and active to mostly links.

The hover Pseudo Class

The hover pseudo class can be used to change the appearance of a link when the mouse is positioned over the link (when it "hovers" over the link). The hover pseudo class is commonly used to change the background color, which has the effect of highlighting the link.

The style for this effect would look something like this:

a:hover {
  background:yellow;
  }

The focus Pseudo Class

As nice as the hover effect is, people who use a keyboard rather than a mouse will not benefit from it. In order to make this effect keyboard-accessible, you must use the focus pseudo class. This class is activated when the user tabs to the link.

a:focus {
  background:yellow;
  }

The active Pseudo Class

For an added special effect, you can change the style for the brief moment during which the person is actually clicking on the link. You might make the text color brighter, for example. You could also make the link appear as if it is being pushed down like a button. You would accomplish this by moving the link 1 pixel to the right and 1 pixel down, as in the following example:

a:active {
  position:relative;
  top:1px;
  left:1px;
  }

Combining hover, focus, and/or active

Oftentimes it makes sense to apply the same styles to both hover and focus, in order to make sure both mouse users and keyboard users experience the same effect. You can also ensure greater cross-browser support for the effect (to make up for Internet Explorer deficiencies) by grouping the active pseudo class with the other two.

a:hover,
a:focus,
a:active {
  background:yellow;
  }

If you want, you could also create a separate style declaration just for the active pseudo class, but that would be optional.

The following example uses the styles described above:

The Accessibility Advantage

When used properly, the hover, focus, and active pseudo classes can increase the accessibility of links by making them more obvious to users. Changing the background color highlights the link, and shows the user exactly which areas are clickable.