Compass sprites hover state

Question

I'm using compass and I've got my compass sprites working just fine. The page loads and my images appear using the compass generated sprite. My question is how do I now set a hover on these? I'm new to compass so I don't understand how this is supposed to work and the compass documentation isn't helping me.

Answer 1

Adding hovers to your sprites is very easy, just put "_hover" (or "_active", or "_target") in the image filename and let compass generate the sprite map for you =D.

Answer 2

Well, what compass does is actually take all your separate images, turn them into one sprite and give you the css background positions for each icon so you paste that in your stylesheet.

If you want hover states for your buttons, you first need to create the hover icons. They should be included in the first sprite (or can be in a different one, as long as you then call the correct file). Compass will then give you the position for these "hover state" icons, and all you have to do is copy those positions and paste them in your css stylesheet for your hover state. For example:

// your normal icon: 
.icon {
      background-image: url(yourimage.png); 
      background-position:-100px -100px;
}

// your hover icon - position for hover state image: 
.icon:hover {
      background-image: url(yourimage.png); 
      background-position:-200px -100px;
}