html - 包含图像的 div 不响应悬停

Question

我有两个 div - 一个包含图像，另一个包含菜单栏。这个想法是将鼠标悬停在 #changeLayer 图标上，然后看到菜单出现。我试过:

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

但这行不通。当我只是将#changeLayer的可见性设置为可见时，它出现在屏幕上，但是由于某种原因悬停功能不起作用。我试过更改 z-indexes，重新排列 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>

在悬停#changeLayer 后保持#menu 打开的最简单方法是将它们都包装在一个元素中，然后使用: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>