按钮悬停菜单

Posted 2023-03-05

【中文标题】按钮悬停菜单

【英文标题】：Menu on Button Hover

【发布时间】：2014-02-12 23:35:41

【问题描述】：

我正在尝试为 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？

【问题讨论】：

也许你的意思是可见性：隐藏；

哦，是的，当然……写在这里只是一个错误。对不起！

【参考方案1】：

html 无效 没有invisible 这样的东西，它是hidden。 如果 CSS3 正常，您可以更改标记或使用相邻兄弟选择器 (+) 或通用兄弟选择器 (~)

-

.menu 
    visibility: hidden;

#menuicon:hover ~ #site-navigation .menu 
    visibility: visible;

FIDDLE

或将标记更改为

<div id="menuicon">MENU ICON HERE
    <nav id="site-navigation">
        <div class="menu">dsadsds
        </div>
    </nav>
</div>

FIDDLE

【讨论】：

1.是的，这是一个错字写在这里，在我的代码中我有“隐藏”。 3.这个解决方案的问题是我们无法导航菜单。一旦我们离开#menuicon，.menu 就会消失

@BoguzDidgeridoo - 要将悬停应用于显示的元素，您必须像第二个示例中那样嵌套它们，或者使用带有超时和一些技巧等的 javascript。

谢谢。我想我会把它们嵌套起来。问题是我在按钮和.menu（相对定位）之间有一点差距。也许我只需要把它移近一点……