Фокусировка на абсолютном элементе

Question

У меня есть кнопка, показывающая только тогда, когда элемент parent (parent-class) зависает. Родительский класс имеет position:relative, а кнопка имеет absolute:position. Это прекрасно работает.

Теперь я хочу, чтобы выпадающий список ведьм появился только тогда, когда я нажимаю кнопку.

Я пытаюсь установить absolute:position и display:none в класс выпадающего списка и отобразить выпадающий список, только когда я сфокусирую кнопку. Но это не работает.

Это пример кода:

<div class="parent-class"> 
    <button class="btn" >button</button> 
    <ul class="dropdown-list"> 
    <li > content1</li> 
    <li > content1</li> 
    </ul> 
</div> 

.parent-class{ 
position: relative; 
} 

.parent-class:hover .btn{ 
display:block; 
} 

.btn{ 
position:absolute; 
display:none; 
} 

.btn:focus .dropdown-list{ 
display: block; 
} 

.dropdown-list{ 
position: absolute; 
display: none; 
} 

Также я использовал Угловое 2, так что если есть способ, чтобы решить эту проблему с угловой 2 было бы идеальным

Answer 1

Ваша проблема в том, что при использовании .btn:focus .dropdown-list вы ожидаете, что элемент .dropdown-list будет дочерним элементом элемента .btn (а в вашем случае - нет). .dropdown-list является элементом-братом .btn.

Вы можете исправить это с помощью (селектор родственный) ~:

.parent-class{ 
 
    position: relative; 
 
    border: 1px solid red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.parent-class:hover .btn{ 
 
    display:block; 
 
} 
 

 
.btn{ 
 
    position:absolute; 
 
    display:none; 
 
} 
 

 
.btn:focus ~ .dropdown-list{ 
 
    display: block; 
 
} 
 

 
.dropdown-list{ 
 
    position: absolute; 
 
    display: none; 
 
}

<div class="parent-class"> 
 
    <button class="btn" >button</button> 
 
    <ul class="dropdown-list"> 
 
    <li > content1</li> 
 
    <li > content1</li> 
 
    </ul> 
 
</div>