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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个选择器：

element1 element2

当element2是element1的子元素时

当＃id_2是＃id_1

的孩子时，您的css为真

您可以将代码更改为：

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

Answer 3

您可以使用CSS attribute selector。更具体地说，[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>