CSS 悬停在元素上

Question

我有两个div

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

我正在尝试制作一种效果，当鼠标悬停在 #b 上时，#a 的背景颜色会发生变化。我用过

CSS

#b:hover + #a{
    background: #000;
}

但它不起作用。
如果我使用

CSS

#a:hover + #b{
    background: #000;
}

它有效。将鼠标悬停在 #a 上会更改 #b 背景颜色。
但我需要先工作。

如何使第一个工作。为什么这不起作用？

Answer 1

+ 和 ~ 组合器将以左侧选择器之后的 sibling 为目标，所以你在第一个使用纯 CSS 是不可能的。如果标记中的 #b 位于 #a 之前，那么它将起作用。