Question

给出以下html：

<div>
  <div id="A1"></div>
  <div>
    <div id="B1" style="float:left;"></div>
    <div id="B2" style="float:left;"></div>
    <div style="clear:both;"></div>
  </div>
</div>

如何将它悬停在1B上以改变1A和1B的bg颜色？另外，如何将它悬停在2B上以改变1A和2B的bg颜色？没有JAVASCRIPT。

为方便起见，这里有一个jsFiddle：http://jsfiddle.net/WJLGs/

Answer 1

你做不到。 CSS没有选择器允许您根据其后代或后来的兄弟选择元素。您选择的元素必须位于链的末尾。

您可以根据＃1A：hover匹配＃1B或＃2B，并且您可以根据＃1B匹配＃2B：hover - 但它们是文档中稍后出现的所有内容。

Answer 2

使用html结构，你不能。

Example关于你没有javascript的东西。
What you want使用jQuery

请注意，您不能在CSS中以id开头的id。

Answer 3

您可以使用css3 sibling combinator执行类似操作，但我没有完全按照您的要求进行操作。但那很有意思...... http://jsfiddle.net/Johnny5/WJLGs/3/

需要有关悬停的css规则的帮助

3 个答案: