別の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ました。要素はお子様やお互いの両親でもありません。この作業を行うためには

<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は、あなたのマークアップの最初の要素でなければなりません：

マイHTML（そして、私は、可能な場合はJavascriptを/ jQueryのせずにこの問題を解決したいと思います）。 CSSの~セレクタは、特定の要素の前に（Not）が続く要素を選択できます。

したがって、#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>