css - 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

+and~组合器将在左侧选择器之后定位兄弟姐妹，因此您在第一个示例中尝试做的事情对于纯 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 的兄弟。在这种情况下不是这样。