悬停/单击DIV以影响另一个Div

Question

当我悬停/单击一个但不想工作时，我正在尝试影响其他3个Div。

#header2:hover {
background-color: rgba(10,50,10,0.9);
}
#header2:active {
    background-color: rgba(0,0,0,0);
}
#header2:active ~ #header1{
    background-color: rgba(0,0,0,0.8);
}
#header2:active ~ #header3{
    background-color: rgba(50,10,10,0.8);
}
#header2:active ~ #header4{
    background-color: rgba(10,10,50,0.8);
}

https://jsfiddle.net/thinkingstiff/a3y52/在此示例中，我发现了试图找出问题的同时，它可以正常工作，而且我看不到任何差异。元素也不是彼此的孩子或父母。（如果可能

我的html：

<div id="header1"><a data-scroll id="link1" href="#header1content"></a></div>
<div id="header2"><a data-scroll id="link2" href="#header2content"></a></div>
<div id="header3"><a data-scroll id="link3" href="#header3content"></a></div>
<div id="header4"><a data-scroll id="link4" href="#header4content"></a></div>

Answer 1

为了进行此工作，#header2应该是标记中的第一个元素。因为CSS中的~选择器可以选择先于（未遵循）特定元素的元素。

因此，如果您想在#header2的悬停在悬停的元素上样式，则#header2应该在标记中首先出现。以同样的方式，如果您想在盘旋的#header4上样式不同元素，则#header4应该在标记中首先出现。

使用CSS flex，您可以更改元素的顺序。它具有可更改订单的儿童元素的order属性。您可以使其工作如下所示：

.headers {
  flex-direction: column;
  display: flex;
}
.headers div {
  background: #ccc;
  margin: 0 0 10px;
  height: 50px;
}
#header2 {order: 2;}
#header1 {order: 1;}
#header3 {order: 3;}
#header4 {order: 4;}
#header2:hover {
background-color: rgba(10,50,10,0.9);
}
#header2:active {
    background-color: rgba(0,0,0,0);
}
#header2:active ~ #header1,
#header2:hover ~ #header1 {
    background-color: rgba(0,0,0,0.8);
}
#header2:active ~ #header3,
#header2:hover ~ #header3 {
    background-color: rgba(50,10,10,0.8);
}
#header2:active ~ #header4,
#header2:hover ~ #header4 {
    background-color: rgba(10,10,50,0.8);
}

<div class="headers">
  <div id="header2"><a data-scroll id="link2" href="#header2content">Header 2</a></div>
  <div id="header1"><a data-scroll id="link1" href="#header1content">Header 1</a></div>
  <div id="header3"><a data-scroll id="link3" href="#header3content">Header 3</a></div>
  <div id="header4"><a data-scroll id="link4" href="#header4content">Header 4</a></div>
</div>