CSS sprites and highlighting- possible to apply "hover" property to multiple items at once?

Question

I have a two sprite images. One image contains the body of a rounded button as well as other states (hover, clicked, ect) while the other contains the left most curve of the image.

I am using these so I don't have to have multiple button images on my webpage, these buttons are can be scaled to any size.

 <div  id="search_tips"><span>Search Tips</span></div>

and CSS

#advanced_search_button, #search_tips{
   background: url("graphics/doc_button_left.png") no-repeat scroll 0 0 transparent !important;
   color:#666666 !important;
   display:block !important;
   float: right !important;
   padding-left: 5px;
   padding-right: 6px;
   padding-top: 0px;
   margin-right: 16px;
   height: 22px;
   overflow: hidden !important;
}


#advanced_search_button span, #search_tips span{
 background: url("graphics/doc_button.png") no-repeat scroll 100% 0 transparent !important;
 padding: 2px 9px 5px 0 !important;
 line-height: 19px;
 display:block !important;
 float: left;

}



#search_tips:hover, #advanced_search_button:hover {
    background-position: 0 -22px !important;
}

#search_tips span:hover, #advanced_search_button span:hover{
    background-position: 100% -22px !important;
}

When I hover over the part of the div which contains the , (the majority of the icon) then both parts of my sprite have the "hover" style applied to it. However, if I hover over the part of the image before the " I only see a chuck of the image have the "hover" style applied to it.

What I would like to be able to do is to activate the "hover" style for the span whenever the parent div has it's hover style applied to it.

Any advice?

Thanks

Answer 1

Have you tried #search_tips:hover span?

Answer 2

Not 100% sure whether it answers your question, but :hover can be a parent selector too:

#search_tips:hover span.classname1
  {
    ......
  }

 #search_tips:hover span.classname1 
  {
     .......
  } 

those rules will both apply the moment search_tips is hovered over.

Answer 3

For starters, when you hover over an item, only that item gets the hover css event, not anything behind it. However you can hide the element on hover, which triggers hover for the element behind it.

Answer 4

Make sure you use the :hover pseudo-class before the span element to make the hover work correctly:

#search_tips:hover span, #advanced_search_button:hover span

I also think you'll need to use your doc_button_left.png as the background of the span if you're using the standard sliding doors technique. I'm not 100% sure about this, but if you keep having problems, you might want to make that switch.