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 时更改背景色#id_2

原文由 cimicimi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 CSS 属性选择器。更具体地说， [attr^=value]

表示具有属性名称 attr 的元素，其值以值作为前缀（前面）。

在您的情况下，它将是 div[id^='id_']:hover 。

作为改编自 Andrzej Gorgoń 的示例

 div {
    background: red;
    width: 50px;
    height: 100px;
    float: left;
    margin-right: 5px;
}

div[id^='id_']:hover {
  background: blue;
}

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

原文由 Tiago Martins Peres 发布，翻译遵循 CC BY-SA 4.0 许可协议