div, содержащий изображение, не отвечающее на зависание

Question

У меня есть два divs - один содержит изображение, а другой - панель меню. Идея состоит в том, чтобы навести курсор на значок #changeLayer и увидеть меню. Я пробовал:

#changeLayer:hover > #menu{ 
    visibility:visible; 
} 

Но это не работает. Когда я просто установил видимость #changeLayer на видимую, он появится на экране, но функция зависания по какой-то причине не работает. Я попытался изменить z-индексы, переупорядочив порядок div, но ничего не происходит. Это потому, что он использует файл изображения и что может быть обходным путем?

CSS:

#menu { 
    position: absolute; 
    z-index: 2; 
    background: #fff; 
    right: 200px; 
    padding: 10px; 
    font-family: 'Open Sans', sans-serif; 
    visibility: hidden; 
} 
#changeLayer{ 
    content:url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png); 
    position: fixed; 
    z-index: 3; 
    top: 1%; 
    left: 26%; 
    height: 50px; 
    width: 50px; 
    opacity: 0.9; 
    } 

    #changeLayer:hover > #menu{ 
    visibility:visible; 
} 

HTML:

<div id='changeLayer'></div> 
<div id='menu'> 
    <input id='bright' type='radio' name='rtoggle' value='bright'> 
    <label for='bright'>bright</label> 
    <input id='light' type='radio' name='rtoggle' value='light', checked='checked'> 
    <label for='light'>light</label> 
    <input id='dark' type='radio' name='rtoggle' value='dark'> 
    <label for='dark'>dark</label> 
</div> 

Answer 1

> является селектор ребенка комбинатор. Это будет нацелено на глубину слоя 1 ребенка, которая соответствует вашему селектору.

Вместо этого вы должны использовать + или соседний селектор, который будет нацелен на следующий элемент, если он соответствует вашему селектору.

Это хорошая статья для справки - https://css-tricks.com/child-and-sibling-selectors/

#menu { 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: #fff; 
 
    right: 200px; 
 
    padding: 10px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    visibility: hidden; 
 
    } 
 
    
 
    #changeLayer { 
 
    content: url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png); 
 
    position: fixed; 
 
    z-index: 3; 
 
    top: 1%; 
 
    left: 26%; 
 
    height: 50px; 
 
    width: 50px; 
 
    opacity: 0.9; 
 
    } 
 
    
 
    #changeLayer:hover + #menu { 
 
    visibility: visible; 
 
    }

<div id='changeLayer'></div> 
 
<div id='menu'> 
 
    <input id='bright' type='radio' name='rtoggle' value='bright'> 
 
    <label for='bright'>bright</label> 
 
    <input id='light' type='radio' name='rtoggle' value='light', checked='checked'> 
 
    <label for='light'>light</label> 
 
    <input id='dark' type='radio' name='rtoggle' value='dark'> 
 
    <label for='dark'>dark</label> 
 
</div>

Самый простой способ сохранить #menu открытым после того, как вы наведете #changeLayer, чтобы обернуть их как в элементе, а затем использовать :hover на родительский элемент.

#menu { 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: #fff; 
 
    right: 200px; 
 
    padding: 10px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    visibility: hidden; 
 
    } 
 
    
 
    #changeLayer { 
 
    content: url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png); 
 
    position: fixed; 
 
    z-index: 3; 
 
    top: 1%; 
 
    left: 26%; 
 
    height: 50px; 
 
    width: 50px; 
 
    opacity: 0.9; 
 
    } 
 
    
 
    .wrap { 
 
    position: relative; 
 
    height: 50px; 
 
    } 
 
    .wrap:hover #menu { 
 
    visibility: visible; 
 
    }

<div class="wrap"> 
 
<div id='changeLayer'></div> 
 
<div id='menu'> 
 
    <input id='bright' type='radio' name='rtoggle' value='bright'> 
 
    <label for='bright'>bright</label> 
 
    <input id='light' type='radio' name='rtoggle' value='light', checked='checked'> 
 
    <label for='light'>light</label> 
 
    <input id='dark' type='radio' name='rtoggle' value='dark'> 
 
    <label for='dark'>dark</label> 
 
</div> 
 
</div>