按钮悬停菜单 [英] Menu on Button Hover

问题描述

我正在尝试为 WordPress 主题制作菜单，但遇到了一些问题.

我希望菜单被隐藏并仅在我们悬停按钮时显示.菜单是同级 div 的子级，如下所示:

</nav>

我如何使用 CSS 来实现，以便当我将鼠标悬停在 #menuicon 上时，.menu 就会出现.当我们不再在 .menu 或 #menuicon 上时再次消失?

我尝试了几件事，但我似乎没有达到目标.现在我是这样的:

.menu{可见性:隐藏；}#menuicon:悬停 .menu{可见性:可见；}

我想我需要能够从我们在 #menuicon 上的悬停中选择兄弟 #site-navigation 的子 .menu.这是正确的想法吗?这是我可以用 CSS 做的事情还是我需要使用 jQuery?

解决方案

1. HTML 无效
2. 没有invisible这样的东西，它是隐藏.
3. 如果 CSS3 没问题，您可以更改标记或使用相邻同级选择器 (+) 或通用同级选择器 (~)

-

.menu {可见性:隐藏；}#menuicon:hover ~ #site-navigation .menu {可见性:可见；}

小提琴

或将标记更改为

 菜单图标在这里<nav id="站点导航"><div class="menu">dsadsds
</nav>

小提琴

I am trying to make a menu for a WordPress theme but I'm having some trouble.

I would like the menu to be hidden and show only when we hover the button. The menu is a child of a sibling div, something like this:

<div id="menuicon>MENU ICON HERE</div>

<nav id="site-navigation">
    <div class="menu">
    </div>
</nav>

How can I use CSS to make it so that when I hover the #menuicon the .menu would show up. And again disappear when we are not anymore over the .menu nor the #menuicon?

I have tried several things, but I don't seem to get there. Now I have it like this:

.menu{
    visibility: hidden;
}
#menuicon:hover .menu{
visibility: visible;
}

I think I would need to be able to select the child .menu of sibling #site-navigation from our hover on #menuicon. Is this correct thinking? Is this something I can do with CSS or do I need to use jQuery?

解决方案

1. The HTML is invalid
2. There's not such thing as invisible, it's hidden.
3. You can either change the markup or use the adjacent sibling selector (+) or the general sibling selector (~) if CSS3 is OK

-

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

FIDDLE

or change the markup to

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

FIDDLE

这篇关于按钮悬停菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！