使用CSS将鼠标悬停在另一个div上时更改多个div样式

当我将鼠标悬停在#main上时，#box和#box2的样式想要更改。但它不起作用

Html代码是

<div id="main">Main</div>
<div id="box">Text</div>
<div id="box1" >Text1</div>

---

以下是我的建议：

#main:hover + #box,
#main:hover ~ #box1 {
    /* CSS */
}

您最初遇到的问题是两个选择器：

#main:hover + #box,
#box1 {
    background-color: green;
}

第一个有效，不幸的是逗号分隔了整个选择器，它没有给出受影响的子代/同级的逗号分隔列表。因此，

#box1

始终是背景色的，而不仅仅是在

#main

的

:hover

上

我使用的组合词是相邻的同级组合词（

+

）和一般同级组合词（

~

），后者将影响

#main

的任何具有

框1

的给定

id

的后续同级组合词

使用

~

编写的第二条规则可以通过使用多个（在本例中为两个）相邻兄弟组合符指定元素的精确顺序来重写，以给出：

#main:hover + #box,
#main:hover + #box + #box1 {
    /* CSS */
}

但随着时间的推移，这确实变得越来越脆弱，当HTML结构发生变化或在相关元素之间插入新元素时，维护变得更加困难

参考资料：

• CSS选择器

---

我建议如下：

#main:hover + #box,
#main:hover ~ #box1 {
    /* CSS */
}

您最初遇到的问题是两个选择器：

#main:hover + #box,
#box1 {
    background-color: green;
}

第一个有效，不幸的是逗号分隔了整个选择器，它没有给出受影响的子代/同级的逗号分隔列表。因此，

#box1

始终是背景色的，而不仅仅是在

#main

的

:hover

上
我使用的组合词是相邻的同级组合词（

+

）和一般同级组合词（

~

），后者将影响

#main

的任何具有

框1

的给定

id

的后续同级组合词
使用

~

编写的第二条规则可以通过使用多个（在本例中为两个）相邻兄弟组合符指定元素的精确顺序来重写，以给出：

#main:hover + #box,
#main:hover + #box + #box1 {
    /* CSS */
}

但随着时间的推移，这确实变得越来越脆弱，当HTML结构发生变化或在相关元素之间插入新元素时，维护变得更加困难
参考资料：
• CSS选择器

---

要使用类和常规同级选择器（~）：
HTML:

---

可能需要使用类和常规同级选择器（~）：
HTML:

---

#main

是兄弟姐妹而不是父母/grandparent@DavidThomas帮我做这个

#main

是兄弟姐妹而不是父母/grandparent@DavidThomas帮我做这个。。。帮我拿这个帮我拿这个