Background position - just one direction

Hi all

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.



  ul li#one{
    background-position:0 0;
  }
  ul li#two{
    background-position:-25px 0;
  }
  ul li#three{
    background-position:-50px 0;
  }
  ul li#four{
    background-position:-75px 0;
  }


On hover I’m adjust each <li> background-position upwards to show the red image.



  ul li#one:hover{
    background-position:0 -25px;
  }
  ul li#two:hover{
    background-position:-25px -25px;
  }
  ul li#three:hover{
    background-position:-50px -25px;
  }
  ul li#four:hover{
    background-position:-75px -25px;
  }


Is it possible to have one hover for all <li>'s and just move the background upwards.

Something like.


   ul li:hover{
      cursor:pointer;
      background-position:auto -25px;
    }

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.