我正在尝试为 WordPress 主题制作菜单,但我遇到了一些麻烦。
我希望菜单隐藏起来,只有当我们将鼠标悬停在按钮上时才显示。菜单是同级 div 的子项,如下所示:
<div id="menuicon>MENU ICON HERE</div>
<nav id="site-navigation">
<div class="menu">
</div>
</nav>
我如何使用 CSS 来制作它,以便当我将鼠标悬停在 #menuicon 上时,.menu
会出现。当我们不再位于 .menu
或 #menuicon
上时再次消失?
我已经尝试了几件事,但我似乎没有到达那里。现在我是这样的:
.menu{
visibility: hidden;
}
#menuicon:hover .menu{
visibility: visible;
}
我想我需要能够从悬停在 #menuicon
上的 #site-navigation
中选择子级 .menu
.这是正确的想法吗?
这是我可以用 CSS 做的事情还是我需要使用 jQuery?
最佳答案
- HTML 无效
- 没有
不可见
这样的东西,它是隐藏
。 - 您可以更改标记或使用相邻同级选择器 (+) 或通用同级选择器 (~)(如果 CSS3 可以)
-
.menu {
visibility: hidden;
}
#menuicon:hover ~ #site-navigation .menu {
visibility: visible;
}
或将标记更改为
<div id="menuicon">MENU ICON HERE
<nav id="site-navigation">
<div class="menu">dsadsds
</div>
</nav>
</div>
关于jquery - 悬停按钮上的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21290928/