Question

Here is some “normal” code for sprite menu

#menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

#menu li.m1 a{ background-position:0px 0px; }
#menu li.m1 a:hover{ background-position:0px -55px; }
#menu li.m1 a.selected{ background-position:0px -55px; }

I have 6 different item, that will require 6 different class x 3 for hover

It’s a can be done EASILY with jQuery in 2-3 lines, but having to load a library for something simple as that… not sure it worth it…

So, YOU will go with the jQuery method, or just copy paste as many css rule as need….

Just making thing over and over again, make me thing there is a better way !

Answer 1

Use CSS and use a class instead of an ID. Then you don’t need to duplicate:

.menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

.menu li.m1 a{ background-position:0px 0px; }
.menu li.m1 a:hover{ background-position:0px -55px; }
.menu li.m1 a.selected{ background-position:0px -55px; }