親divの子ではなく、親divの外にあるdivを選択するにはどうすればよいですか？

Question

ユーザーがhamburger divの上を移動したときに、navのdivを選択してdisplayプロパティをblockに変更しようとしています。

インターネットを足場にして、:not(insert_container_name_here)擬似クラスを使用するとこれを達成できると言われている人もいますが、動作していないようです。

私はJavascriptを使用できないという要件があります。以下は

この問題を解決するために私の試みです：

.nav { 
    display: none; 
    padding: 15px; 

    background: red; 
} 

.hamburger { 
    margin: 0; 
    padding: 15px; 
    text-align: left; 
} 

.hamburger:hover .hamburger:not(.hamburger) > .nav { 
    display: block; 
} 

.hamburger > .toggle-btn { 
    color: black; 
    text-decoration: none; 
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 

<div class="hamburger"> 
    <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a> 
</div> 

<div class="nav"> 
    <p>Display</p> 
</div> 

Answer 1

general sibling selector~を使用することにより、あなたは2間の他の要素を追加することを決定した場合でも、navを対象とすることができるようになります。

.hamburger:hover ~ .nav { 
    display: block; 
} 

サンプルスニペット

.nav { 
 
    display: none; 
 
    padding: 15px; 
 
    background: red; 
 
} 
 
.hamburger { 
 
    margin: 0; 
 
    padding: 15px; 
 
    text-align: left; 
 
} 
 
.hamburger:hover ~ .nav { 
 
    display: block; 
 
} 
 
.hamburger > .toggle-btn { 
 
    color: black; 
 
    text-decoration: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="hamburger"> 
 
    <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a> 
 
</div> 
 

 
<div class="nav"> 
 
    <p>Display</p> 
 
</div>

Answer 2

このような+adjacent sibling selectorを使用します。

.hamburger:hover + .nav { 
    display: block; 
} 

デモは、以下を参照してください：

.nav { 
 
    display: none; 
 
    padding: 15px; 
 
    background: red; 
 
} 
 
.hamburger { 
 
    margin: 0; 
 
    padding: 15px; 
 
    text-align: left; 
 
} 
 
.hamburger:hover + .nav { 
 
    display: block; 
 
} 
 
.hamburger > .toggle-btn { 
 
    color: black; 
 
    text-decoration: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="hamburger"> 
 
    <a href="#" class="toggle-btn"><i class="fa fa-bars"></i></a> 
 
</div> 
 

 
<div class="nav"> 
 
    <p>Display</p> 
 
</div>