<分区>
<分区>
我有一个看起来像这样的菜单
<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。知道我做错了什么吗？
最佳答案
这样是行不通的。在 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>请看这是如何工作的
在此示例中，具有类名 .navigation 的 nav 具有兄弟 collection-dropdown-menu 和 journal-dropdown-menu 。但这些不是 collection-dropdown 的同级元素，后者是 navigation 的内部元素。所以我在 navigation 中添加了 hover 样式，这样就可以了
关于html - 悬停时显示div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51631787/