html - css hover 不适用于先例元素

Question

我想在元素悬停时更改另一个元素属性。到目前为止，我想出了以下 CSS:

#test3:hover #test4
{
background-color: red;
}

<div id="test3">three</div>
<div id="test4">four</div>

但是，这是行不通的。这可能吗？你有什么建议？

Answer 1

#test3:hover #test4

这意味着，目标元素 test4 是 test3 的子元素。你想要 + sibling selector相反:

#test3:hover + #test4
{
background-color: red;
}

Browser compatibility table