I have a demo here - http://www.ttmt.org.uk/forum/controls
It's a really simple <li> list using an image sprite as the backgrounds.
The background-position on each <li> is adjusted to show each image.
On hover I'm adjust each <li> background-position upwards to show the red image.
Is it possible to have one hover for all <li>'s and just move the background upwards.
So instead of calling each <li> I can just adjust the background
position vertically and keep it's horizontal position
Why don't you try constructing the image so all the icons are lined up vertically? They would need to be interlaced (black followed by red, etc)
Then set up the shift to be vertical by 25px for hover.