règles CSS multiples ou jquery

Question

Voici un code "normal" pour le menu sprite

#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; } 

J'ai 6 article différent, qui nécessitera 6 classes différentes x 3 pour vol stationnaire

Il est un peut être fait FACILEMENT avec jQuery dans 2-3 lignes, mais avoir à charger une bibliothèque pour quelque chose de simple comme ça ... pas sûr que ça en vaille la peine ...

Donc, vous ira avec la méthode jQuery, ou simplement copier coller comme beaucoup de règle de css comme besoin ....

Juste faire chose encore et encore, faites-moi une chose, il y a une meilleure façon!

Answer 1

Utilisez CSS et utilisez une classe au lieu d'un ID. Ensuite, vous n'avez pas besoin de dupliquer:

.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; } 

Answer 2

@GenericTypeTea a la bonne réponse ici. Mais vous pouvez faire votre css plus petit par un, peut-être deux lignes par

a) la combinaison .menu li.m1 a:hover et .menu li.m1 a.selected comme si

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

et

b) enlever éventuellement .menu li.m1 a{ background-position:0px 0px; }

En supposant .m1 est la seule classe pour le menu et que 0 0 est la position par défaut pour le background pourrait rendre ce lin e inutile.