CSS:悬停在其他元素上？

Question

简短的问题:为什么background-color的.b时候我将鼠标悬停不会改变？.a？

CSS

.a {
    color: red;
}

.b {
    color: orange;
}

.a:hover .b {
    background-color: blue;
}

HTML

<div id="wrap">
    <div class="a">AAAA</div>
    <div class ="b">BBBB</div>
</div>

http://jsfiddle.net/2NEgt/

Answer 1

你需要.a:hover + .b而不是.a:hover .b

.a:hover .b 适用于像这样的结构

<div class="a">AAAA
  <div class ="b">BBBB</div>
</div>

如果在某些时候你需要有.A和.B之间的一些元素,那么你就需要使用.a:hover ~ .b,它适用于所有的兄弟姐妹.a后,它的到来,不仅是下一个.

演示http://jsfiddle.net/thebabydino/EajKf/

Answer 2

你能做点什么a:hover + b吗？见http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 3

你可以使用+选择器

.a:hover + .b {
    background-color: blue;
}

将css应用于兄弟元素,或者

.a:hover > .b {
    background-color: blue;
}

对于嵌套类.