Наведите указатель мыши на 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/ В этом примере я нашел 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 должен быть первым в разметке. Точно так же, если вы хотите стилизовать разные элементы при наведении #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>