Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Hover States with Magic Sprite Selectors1:13 with Guil Hernandez
If we need hover states in our sprite sheet, Compass will generate them with its Magic Sprite selectors.
- Compass Magic Selectors
- To display hover states, add the new images to your sprites folder –– with the same file names, and make sure the file names end in _hover.png
So, now you might be thinking well what if we need a hover state for our icons?
Well Compass has this part covered too, with its magic sprite selectors.
And these is pretty amazing, actually.
So, if we wanna display colorful icons on hover,
we'll need to add the new images to our
icons folder, with the same file names just make
sure that the file names end in underscore hover.
So for example, here we
have dribble_hover.png, facebook_hover and so forth.
After that, compass takes care of the rest.
So if you go back to our sprites partial, then save and
compile it, compass generates a new sprite sheet, with those new hover images.
So when we click to open our sprite sheet, there we see how compass generated.
A new sprite sheet, containing those hover images.
And in the output CSS, when we scroll down, we can also see
how it generated those hover [INAUDIBLE]
classes, that display the new hover images.
So when we take a look at our page again and refresh.
Now we have our hover states.
And that's all there really is to it.
So, next we'll see how Compass gives us more control over sprites.
With it's sprite sheet configuration options.
You need to sign up for Treehouse in order to download course files.Sign up