You need to make a rollover on a sprite css image.
Solution:
You only need to make a ":rollover" class on your master css file like this:
...
.buttons{background-image:url('../images/sprite.png');background-position:-13px -21px}
.buttons:hover{background-image:url('../images/sprite.png');background-position:-13px -21px}
...
The tip is to add ":hover" to a different css class, that class will be loaded when the mouse pass over your css image sprite.
Your HTML code remains as:
...
<li class="buttons"> </li>
...
...
.buttons{background-image:url('../images/sprite.png');background-position:-13px -21px}
.buttons:hover{background-image:url('../images/sprite.png');background-position:-13px -21px}
...
The tip is to add ":hover" to a different css class, that class will be loaded when the mouse pass over your css image sprite.
Your HTML code remains as:
...
<li class="buttons"> </li>
...