在CSS悬停事件上，我可以更改另一个div的样式吗？

Question

当我将鼠标悬停在ID为“ a”的div或类上时，是否可以更改ID为“ b”的div或类的背景色？

Answer 1

是的，您可以执行此操作，但前提#b是#a在HTML之后。

如果#b紧随其后#a：

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

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

这是使用相邻的同级组合器（+）。

如果#a和之间还有其他元素#b，则可以使用以下元素：

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

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

这是使用通用的同级组合器（~）。

双方+并~在所有现代浏览器和IE7 +工作

如果#b是的后代#a，则可以简单地使用#a:hover #b。

替代方案：您可以使用纯CSS通过将第二个元素放置在第一个元素之前来执行此操作。第一个div是标记中的第一个，但位于第二个的右侧或下方。它将像以前的兄弟一样工作。