Sunday, April 26, 2015

how to rollover on CSS Image


You need to make a rollover on a sprite css image.


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">&nbsp;</li>

No comments:

Post a Comment