將鼠標懸停在/點擊以影響另一個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>