id:在css中悬停id？可能吗？

Question

这是我的HTML代码

<div id="id_1"></div>
<div id="id_2"></div>
<div id="id_3"></div>
<div id="id_4"></div>

这是我的css代码

<style>
#id_1:hover #id_2{background-color:red;}
#id_1:hover #id_3{background-color:red;}
#id_1:hover #id_4{background-color:red;}
#id_2:hover #id_4{background-color:red;}
</style>

这个悬停是为什么不工作？谁来帮帮我 ？

当我悬停#id_1时,我需要更改backgroundcolor#id_2

Answer 1

因为这些div是兄弟姐妹,所以你需要使用general sibling selector或~

#id_1:hover ~ div

这将匹配所有#id_1类型的兄弟元素div,您可以使用它而不是为每个元素编写单独的选择器div

#id_2:hover ~ #id_4

这将只匹配同级的元素id_2有#id_4,如果你只想匹配的div你可以添加div#id_4

#id_1:hover ~ div {
  background-color: red;
}

#id_2:hover ~ #id_4 {
  background-color: red;
}

<div id="id_1">div</div>
<div id="id_2">div</div>
<div id="id_3">div</div>
<div id="id_4">div</div>

如果您只想在悬停时更改下一个兄弟元素的颜色,#id_1可以使用adjacent sibling selector或+

#id_1:hover + div {
  background-color: red;
}

<div id="id_1">div</div>
<div id="id_2">div</div>
<div id="id_3">div</div>
<div id="id_4">div</div>