TechNote (Archived)

Using the a:hover feature in CSS

With CSS styles, you can set the appearance of links when they are moused over. You do this by redefining the <a> tag in CSS, and specifying the hover pseudo-class.

Warning: The hover pseudo-class, which is necessary to set the color of links when moused over, is supported (so far) by Internet Explorer 4 and above and Netscape 6. Netscape 4.7 does not support this functionality. Other browsers may or may not depending on their level of CSS support.

Pseudo-classes

CSS defines a number of pseudo-classes, which can be used in a similar way to CSS classes (custom styles). The difference is that classes are defined by the user. Pseudo-classes are part of the CSS specification, and are available on any browser that supports them. The most common pseudo-class is hover, and so far it's only implemented with the <a> tag. Below are instructions for redefining the <a> tag using the hover pseudo-class. Doing so will create a mouse-over effect on links.

Changing the appearance of links when they're moused over

Click the New Style button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel).
Select CSS Selector for Type.
Choose a:hover from the Selector pop-up menu.
In the Define in: section, select either New Style Sheet File or This Document Only. The New Style Sheet File option will create an external file with the information. This will make it available to other pages on your site. The Document Only option will restrict the style to the current page.
Click OK.
The Style Definition dialog box appears.
Set the color you want for your link, as well as any other stylings you may want.
Click OK.
The stylings you specified will show when a link is moused over in Internet Explorer 5 (and higher) and Netscape 6.

View a demonstration of these steps