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>

包含图像的div不响应悬停

1 个答案: