CSS 精灵和突出显示 - 可以应用“悬停”一次拥有多个物品的属性？

Question

我有两个精灵图像。一张图像包含圆形按钮的主体以及其他状态（悬停、单击等），而另一张图像包含图像的最左侧曲线。

我正在使用这些按钮，因此我的网页上不必有多个按钮图像，这些按钮可以缩放到任何大小。

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

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

当我将鼠标悬停在包含 , （图标的大部分）的 div 部分上时，我的精灵的两个部分都应用了“悬停”样式。但是，如果我将鼠标悬停在“之前的图像部分上，我只会看到图像的一部分应用了“悬停”样式。

我想要做的是激活“悬停”样式每当父div应用它的悬停样式时，

有什么建议

吗？

Answer 1

您尝试过#search_tips:hover span吗？

Answer 2

对于初学者来说，当您将鼠标悬停在某个项目上时，只有该项目会获得悬停 CSS 事件，而不是其后面的任何内容。
但是您可以在悬停时隐藏该元素，这会触发其后面的元素悬停。

Answer 3

不能 100% 确定它是否回答了您的问题，但 :hover 也可以是父选择器：

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

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

这些规则将在 search_tips 出现时两者应用盘旋在上空。

Answer 4

确保在 span 元素之前使用 :hover 伪类以使悬停正常工作：

#search_tips:hover span, #advanced_search_button:hover span

我还认为您需要使用 doc_button_left.png 作为如果您使用标准滑动门技术，则为 span 的背景。我对此不是 100% 确定，但如果您仍然遇到问题，您可能需要进行更改。