将鼠标悬停在底部div上以影响顶部div

Question

为什么当我将鼠标悬停在底部div（b）上时，它不会影响顶部div（a）：JSFiddle

HTML：

<div id="a">Div A</div>
<div id="b">Div B</div>

CSS：

#b:hover #a {
    background: #ccc;
}

Answer 1

那是因为 a 不是 b 的孩子。

你现在在说。 - 当悬停 B 时，改变孩子的颜色 A 。

由于 a 不是 b 的孩子，因此您的逻辑不正确。

Answer 2

使用纯css是不可能的，因为没有“上一个兄弟”选择器。

您可以选择下一个兄弟并使用此效果

#a:hover + #b
{
    background-color:red;
}

Js Fiddle Demo

Answer 3

@drip是正确的。它应该像

#b:hover, #a:hover {
   background: #ccc;
}