HTML and CSS Reference
In-Depth Information
Figure 3-51
Dynamic pseudo-classes
Pseudo-Class
Description
Example
link
The link has not yet been visited
by the user.
a:link {color: red;}
visited
The link has been visited by
the user.
a:visited {color: green;}
active
The element is in the process of
being activiated or clicked by
the user.
a:active {color: yellow;}
hover
The mouse pointer is hovering
over the element.
a:hover {color: blue;}
focus
The element has received the
focus of the keyboard or mouse
pointer.
input:focus {background-color: yellow;}
In some cases, two or more pseudo-classes can apply to the same element. For
example, a hypertext link can be both previously visited and hovered over. In such situ-
ations, the standard cascading rules apply—the pseudo-class that is listed last is applied
to the element. You should enter the hypertext pseudo-classes in the following order in
your style sheets—
link
,
visited
,
hover
, and
active
. The
link
pseudo-class comes
fi rst because it represents a hypertext link that has not yet been visited or even clicked
by the user. The
visited
pseudo-class comes next, for links that previously have been
visited or clicked. The
hover
pseudo-class follows, for the situation in which a user has
once again moved the mouse pointer over a hypertext link before clicking the link. The
active
pseudo-class is last, representing the exact instant in which a link is clicked by a
user. Any styles set with the
link
pseudo-class are inherited by the
visited
,
hover
, and
active
pseudo-classes.
Creating a Hypertext Rollover
• To create a rollover for a hypertext link, apply the styles
a:link {
styles
;}
a:visited {
styles
;}
a:hover {
styles
;}
a:active {
styles
;}
to the
a
element, where
styles
are the CSS styles applied to hypertext links that
have not been visited (
link
), have already been visited (
visited
), have the mouse
pointer over them (
hover
), or are actively being clicked (
active
).
The
hover
,
active
, and
focus
dynamic pseudo-classes also can be applied to non-
hypertext elements. For example, the following style rule causes the background color
of each entry in a navigation list to change to medium blue whenever a user hovers the
mouse pointer over it:
nav ul li:hover {
background-color: rgb(83, 142, 213);
}
Tammy suggests that you add this style rule to provide users with the visual feedback
that is missing from the navigation links as a result of removing the underlining.
