将鼠标悬停在/点击以影响另一个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/在这个例子中，我发现whilist试图找出问题，它工作正常，我看不出任何差异。 这些元素也不是彼此的孩子或父母。 （如果可能的话，我想在没有Javascript / Jquery的情况下解决这个问题）

我的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应该在标记中#header2在第一位。 同样地，如果你想在#header4悬停时设置不同的元素，那么#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>