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

+和~组合子会在左手选择器之后定位兄弟，所以你在第一个例子中尝试做的就是纯粹的CSS。如果#b在您的标记中位于#a之前，则可以使用。

Answer 2

尝试使用jQuery：

$("b").hover(function(){ /*hovering*/
    $("#a").css("backgroud-color", "#000");
}, function(){ /*hovering out*/
    $("#a").css("backgroud-color", "set_it_back_to_the_orignial");
});

如果您想使用CSS，那么在您更改标记并在#a下获取#b之前，这是不可能的。

Answer 3

它不起作用，因为它的含义不同。

选择具有id a的元素，如果它直接跟随#b的兄弟。在这种情况下不是。