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

Question

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

Html代码

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

Css是

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

以下是demo link

Answer 1

我建议如下：

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

JS Fiddle demo

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

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

第一个工作，不幸的是逗号分隔整个选择器，它不会给逗号分隔的后代/兄弟的列表受到影响。因此，#box1 总是背景色，而不仅仅是:hover的{​​{1}}。

我使用的组合子是相邻兄弟组合子（#main）和一般兄弟组合子（+），后者将影响{{1}的任何后来的兄弟姐妹}具有~ #main的给定id。

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

~

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

参考文献：

• CSS选择器。

Answer 2

使用类和一般兄弟选择器（〜）可能更干净：

HTML：

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

CSS：

#main:hover ~ .box {
    /* CSS */
}