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>