adrifolio Blog

The forgotten a:visited property

At least forgotten by me, the a:visited property is a quick and neat way of making your designs more usable and to even “sensitive” to the touch. 

Heres’ an example:
Love

This is the sprite in use:

This is the code:

<style type=”text/css”>
<!—
a.love {
display: block;
text-indent: -9999px;
height: 35px;
width: 37px;
float: left;
background-image: url(heart.png);
background-repeat: no-repeat;
outline:none;
margin-left: 3px;
background-position: 0px 0px;
}

/*OVER*/
a:hover.love {background-position: -37px 0px;}

/*DOWN*/
a:active.love {background-position: -74px 0px;}

—>
</style>

<a href=”#”class=”love”>Love</a>

The trick is to define the hover state first. Literally the a:hover property needs to appear before the a:visited. Pretty neat, isn’t it?

Here’s some reference to look at CSS :active pseudo-class