Using dynamic styles, you can also change the style of the different states of a hypertext link, which is defined by the anchor tag, <A>. The anchor tag differs slightly from most other tags in that it has four states, called pseudoclasses. The four pseudoclasses are described here:
Pseudoclass | State | Default Appearance |
---|---|---|
link | The link has not been visited. | Blue with underline |
visited | The link has been visited. | Purple with underline |
hover | The mouse is resting over the link. | Blue with underline |
active | The mouse is clicking the link. | Blue with underline |
All of these pseudoclasses are available in Internet Explorer. Only link and visited work inside current versions of Netscape Navigator.
When you create a style sheet, you can modify the style of a pseudoclass by separating the pseudoclass name from the anchor tag with a colon, as shown here:
A:link {color: yellow} A:visited {color: red} A:hover {color: green} A:active {color: blue} |
Code Listing 11-13 demonstrates how these pseudoclasses can be used to create a simple text rollover effect in Internet Explorer.
Code Listing 11-13.
<HTML> <HEAD> <TITLE>Listing 11-13</TITLE> <STYLE> A:link {text-decoration: none} A:hover {color: red; text-decoration: underline} </STYLE> </HEAD> <BODY> <A HREF="http://msdn.microsoft.com">msdn.microsoft.com</A><BR> <A HREF="http://microsoft.com">microsoft.com</A><BR> <A HREF="http://www.w3.org/style/">www.w3.org/style</A><BR> <A HREF="http://www.w3.org">www.w3.org</A><BR> </BODY> </HTML> |
Figure 11-13. A link is highlighted and underlined when the mouse goes over it.
The first style (A:link) is used to set the normal appearance of links on the page. Setting text-decoration to none removes the underline from links on the page. When the user moves the mouse over a link, it enters the hover state and the style specified for A:hover takes effect, underlining the link and changing it to red.
NOTE
Generally, removing underlines from normal in-line hyperlinks is not recommended. Usability studies have shown that end users commonly interpret an underline below text as an indication that the text is a hyperlink. A lack of underlining can lead users to think that a link is not in fact a link. This effect is not as bad in the case of a menu of links—for example, in a left-hand menu navigation bar. Changing a link to boldface on mouseover is not recommended either because this changes the width of the text and might cause the page to reflow.