Hover over states can be a nice way to give your visitors visual hints, and it looks good.
It was common practice in the past to make use of two images and javascript to create the effect. This was something that Dreamweaver did (and possibly still do) by using two images and it became common practice to have 2 separate images to create this effect.
These days however, we can achieve this effect by just using one image and css.
This is done by placing the two states in the same image, and only showing half the image when the mouse is outside, and when the cursor is over the image, we change the background position so the "on" state is showing.
.hoverclass
{
display:block;
width: 135px;
height:37px;
background: url('/Images/csshoverimage.png') 0 0 no-repeat;
text-decoration: none;
}
.hoverclass:hover
{
background-position: 0 -37px;
}
<a href="/link.html" class="hoverclass">Link</a>
