Multiple CSS rules or jquery

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 !

the real issue here is fixing the improper css..

Petrogad
– Petrogad

2010-09-03 17:57:22 +00:00
Commented Sep 3, 2010 at 17:57 — Petrogad
– Petrogad, Commented Sep 3, 2010 at 17:57

djdd87 · Accepted Answer · 2010-09-03 17:41:22Z

3

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

answered Sep 3, 2010 at 17:41

djdd87

68.7k29 gold badges160 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason Gennaro · Accepted Answer · 2011-09-30 03:35:11Z

0

@GenericTypeTea has the right answer here. But you could make your css smaller by one, maybe two lines by

a) combining .menu li.m1 a:hover and .menu li.m1 a.selected like so

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

and

b) possibly removing .menu li.m1 a{ background-position:0px 0px; }

Assuming .m1 is the only class for menu and that 0 0 is the default position for the background might make this line unnecessary.

answered Sep 30, 2011 at 3:35

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Collectives™ on Stack Overflow

Multiple CSS rules or jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related