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