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

Question

<分区>

Answer 1

是的，您可以这样做，但前提是 #b 在 HTML 中位于 #a 之后。

如果 #b 紧跟在 #a 之后:http://jsfiddle.net/u7tYE/

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

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

那是使用 adjacent sibling combinator (+).

如果#a和#b之间还有其他元素，可以这样用:http://jsfiddle.net/u7tYE/1/

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

那是使用 general sibling combinator (~)。

+ 和 ~ 都适用于所有现代浏览器和 IE7+

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

备选方案:您可以使用纯 CSS 将第二个元素放在第一个元素之前来执行此操作。第一个 div 在标记中位于第一个，但位于第二个的右侧或下方。它会像 previous sibling 姐妹一样工作。