So, I have an inline list that I'm working with. My problem is that I want to use an image in the list and change the image when it is hovered over. I thought that I could do a sprite for this, but damn I can't @$#^^$ get it to work.

So, I'm wondering if I should be doing a sprite here or an image rollover???


HTML code


<div id="MainNavigation">

<ul id="MainNav">

<li> <a href="#">About us</a></li>
<li> <a href="#">Classes</a></li>
<li> <a href="#">Personal Training</a></li>
<li> <a href="#">Events</a></li>
<li> <a href="#">Calendar</a></li>
<li> <a href="#">Contact us</a> </li>

<li> <a href="#"><img src="IMAGES/Mixed_Martial_arts.png" width="220" height="85" alt="Mixed Martial Arts" /></a></li>

<li> <a href="#"><img src="IMAGES/TRX_training.png" width="92" height="65" alt="Mixed Martial Arts" /></a></li>



<li> <a class="SpinClass" href="#"><img src="IMAGES/SPIN_CLASSES.png" width="92" height="65" alt="Spin class" /></a>
</li>



</ul>


</div> <!--MainNavigation-->



CSS



#MainNav li a img.SpinClass:hover {
background-image:url(IMAGES/TRX_training.png);


}