Как выбрать div, который не является дочерним элементом родительского div, но находится вне родительского div?

Question

Я пытаюсь выбрать div с классом nav, чтобы изменить свойство 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>