One of the cool things you can do with CSS is create a rollover or hover effect using a single image, in CSS it’s known as a ‘sprite’. A sprite is basically a single image with different colors on it that would represent your desired hover or rollover colors. Using a single image saves on load time since most methods of rollover require multiple images, the original, the hover and potentially an active state.Here is an example sprite image using two horizontal areas 30 pixels high to correspond with our code sample:

The sprite has two stripes 30 pixels tall which allows us to shift the image up or down precisely that amount to expose which color we want. Here’s the CSS to accomplish it:

a {
       display: block;
       background: url(sprite.jpg) no-repeat;
       height: 30px;
       width: 250px;
}

a:hover {
       background-position: 0 -30px;
}