如何選擇不是父div的孩子但在父div之外的div？

Question

我試圖選擇與類nav的div來將display屬性更改爲block當用戶懸停在hamburger股利。

我搭了腳手架的互聯網，看到有人說你可以做到這一點，如果你使用: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~，你將能夠爲目標，即使你決定增加兩者之間的其他元素的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>