Sunday, April 26, 2015

how to rollover on CSS Image

Problem:   

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

No comments:

Post a Comment