Pages

Monday, May 7, 2012

Control the style of links with CSS pseudo-classes

For anchors, CSS offers the pseudo-classes :hover, :visited, and :link. These classes let you style the three stages of a link. In this course we use :link to style the link before the user activates it. Use :hover to style the link when the cursor hovers over it, and use :visited to style the link after the user visits it.


Typically, you'll use all three classes in tandem, like so:

a{border:solid}
a:visited {border-color:blue;}
a:link {border-color:blue;}
a:hover {border-color:red;}

In IE browsers, though, the :hover pseudo-class won't work unless it follows the :visited class. For maximum browser compatibility, it's smart to place :hover at the end.


No comments:

Post a Comment

Note: Only a member of this blog may post a comment.