Question

我有一个看起来像这样的菜单

   <nav role="navigation" class="small--hide">
    <ul class="site-nav">
        <li class="has-desktop-dropdown collection-dropdown">Link 1</li>
        <li>Link 2</li>
         <li class="has-desktop-dropdown journal-dropdown">Link 3</li>
    </ul>
   </nav>

现在，我希望在列表项之一悬停时显示div

<div class="desktop-dropdown collection-dropdown-menu small--hide">
 <p>Some content</p>
</div>
<div class="desktop-dropdown journal-dropdown-menu small--hide">
 <p>Some content</p>
</div>

我一直在尝试使用的CSS是这样的：

  .collection-dropdown:hover  ~ .collection-dropdown-menu {
    display:block;
  }
  .journal-dropdown:hover ~ .journal-dropdown-menu {
    display:block;
  }

但是它没有显示悬停时的div。有什么想法我做错了吗？

Fiddle

Answer 1

它不会那样工作。在CSS sibling中表示特定dom元素的相邻元素。在您的问题中，collection-dropdown没有类collection-dropdown-menu的兄弟姐妹。

.collection-dropdown-menu, .journal-dropdown-menu {
  display: none;
}
.navigation {
  cursor: pointer;
}
.navigation:hover  ~ .collection-dropdown-menu, 
.navigation:hover ~ .journal-dropdown-menu {
  display:block;
}

 <nav role="navigation" class="navigation small--hide">
    <ul class="site-nav">
        <li class='has-desktop-dropdown collection-dropdown'>Link 1</li>
        <li>Link 2</li>
        <li class='has-desktop-dropdown journal-dropdown'>Link 3</li>
    </ul>
</nav>
<div class="desktop-dropdown collection-dropdown-menu small--hide">
 <p>Some content</p>
</div>
<div class="desktop-dropdown journal-dropdown-menu small--hide">
 <p>Some content</p>
</div>

请注意这是如何工作的

在此示例中，类名为nav的{{1}}有兄弟姐妹.navigation和collection-dropdown-menu。但是，这些不是journal-dropdown-menu的兄弟姐妹，collection-dropdown是navigation的内部元素。所以我在hover中添加了navigation样式，因此可以正常工作

在悬停时显示div

1 个答案: