HTML and CSS Reference
In-Depth Information
Figure 6-5.
Browser output of the visited state of an anchor element styled with CSS
Physically moving the mouse pointer over an anchor triggers the hover link state. Most browsers don't
provide default styling for the hover state, so you'll want to make sure to declare some styles for this
pseudo-class (see Listing 6-22).
Listing 6-22.
CSS for styling the hover state of an anchor element
a:link {
color: #cc0000;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #00cc00;
}
a:hover {
color: #cccc00;
}
With the above bit of code, anchors will turn yellow when hovered over with a mouse. Figure 6-6 shows
the output of this code.
Figure 6-6.
Browser output of the hover state of an anchor element styled with CSS
Related to the hover state, a link's focus state triggers when the browser gives an anchor focus. This
occurs when you use the keyboard's Tab key to cycle through the interactive elements on a page. By
default, most browsers will add a one pixel, dotted border to the focused link. Pressing the Enter key on a
focused link will activate that hyperlink. Listing 6-23 adds a rule for the
:focus
pseudo-class.
