Question

Suppose I have a span:

<span class="myspan"></span>

.myspan{
background: url(image.png) top left no-repeat;
}

How do I make it so that when people hover my span, it shows “image_hover.png”?

Answer 1

.myspan:hover{
background-image:url('image_hover.png');
}

But what you really would want to do is make one image with both states, natural state and hover state, one beside the other. Then you would have:

.myspan{
width: *the width of only one state. aka half the width of the whole image*
background:url('image.png') top left no-repeat;
}

.myspan:hover{
background-postion:right;
}

That way only one image is loaded and on hover, it just moves it left to right. Displaying only one half of the image.