I have one style:

body.schedule #viewing-guide-tabbed-view #schedule-day-tabs li  {
background: url (image-A);

And a more specific style:

body.schedule #viewing-guide-tabbed-view #schedule-day-tabs li:hover, body.schedule #viewing-guide-tabbed-view #schedule-day-tabs li.active {
background: url (image-B);

The problem I am having is that when I roll over my bullet, I want to see background "image-B" but not background "image-A". What I am getting are both images (with image-A behind image-B...which has some transparency on it because it's a PNG file)

1 answer


try removing the active state, plus you are using too many selectors, why don't you simplify your css a little:

body.schedule #schedule-day-tabs li{ background: url (image-A); } body.schedule #schedule-day-tabs li:hover{ background: url (image-B); }

Answered about 8 years ago by adelacreative
  • Well, I need the body selector because each page is different, plus I have several set of tabs on the page, so I need to specify which ul has which rollover. I also need the active class to indicate which page I am on. redconservatory about 8 years ago
  • yes, but in the selectors you don't really need to add "#viewing-guide-tabbed-view", you cna simplify your selectors. It's the same as using "ul a" instead of using "ul li a" This will help with your page speed. adelacreative about 8 years ago