1

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

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

 <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 应用了悬停样式时激活跨度的“悬停”样式。

有什么建议吗？

谢谢

4

4 回答 4

2

你试过#search_tips:hover span吗？

于 2010-07-09T22:06:37.293 回答
1

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

于 2010-07-09T22:08:15.850 回答
0

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

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

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

这些规则都将在search_tips鼠标悬停时适用。

于 2010-07-09T22:06:58.913 回答
0

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

#search_tips:hover span, #advanced_search_button:hover span

我还认为，如果您使用标准推拉门技术，则需要使用您doc_button_left.png的背景。span我不是 100% 确定这一点，但如果你一直遇到问题，你可能想要做出改变。

于 2010-07-09T22:14:00.683 回答