CSS-将多个：hover连接到不同的部分

Question

我对:hover在具有不同颜色的多个对象上几乎不需要帮助。 当我将鼠标悬停在第一部分时，第二部分也应更改颜色。

HTML

<section class="object1"></section><section class="object2"></section>

CSS

.object1 {
background-color:#F00;
width:100px;
height:50px;
}


.object2 {
background-color:#00F;
width:100px;
height:50px;
}

.object1:hover{
    background-color:#FF0;
    }

.object2:hover {
    background-color:#000;

}

谢谢阅读 ：）

Answer 1

将.object2悬停在.object1 ，可以使用CSS的相邻兄弟组合器+选择器将更改应用于.object1 ，但是您不能.object1这样做：

.object1:hover,
.object1:hover + .object2 {
    background-color:#FF0;
}

---

演示

 .object1 { background-color:#F00; width:100px; height:50px; } .object2 { background-color:#00F; width:100px; height:50px; } .object1:hover, .object1:hover + .object2 { background-color:#FF0; } .object2:hover { background-color:#000; } 

 <section class="object1">Section 1</section> <section class="object2">Section 2</section>