如何选择不是父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>