CSS rollover sprites

I ha开发者_C百科ve 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.

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

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

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

just change

background-position: 0 77px;

to

background-position: -77px 0;

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