CSS rollover sprites.

Question

I have used this effect before, everything is in order (As far as I see), but it's just not working. What have I missed?

Fiddle here

Sprite here

Thanks.

Answer 1

Um, your background-position is adjusting the top starting position rather than the left starting position?

Answer 2

Since your sprite is arranged horizontally, you will want to offset the hover state like this:

element:hover {
background-position: -77px 0;
}

Answer 3

Your background offset seems to be wrong - instead of 0 77px (which is a y-offset, along the wrong axis), try -77px 0.

Answer 4

just change

background-position: 0 77px;

to

background-position: -77px 0;