鼠标悬停菜单 [英] Menu on Button Hover

问题描述

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

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

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

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>

如何使用CSS制作鼠标悬停在#menuicon上的.menu.当我们不再在.menu或#menuicon上时，又消失了吗?

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;
}

我认为我需要能够从#menuicon的悬停中选择同级#site-navigation的子级.menu.这是正确的想法吗? 这是我可以使用CSS还是需要使用jQuery的东西?

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. HTML无效
2. 没有invisible之类的东西，它是hidden.
3. 如果CSS3正常，您可以更改标记或使用相邻的兄弟选择器(+)或常规兄弟选择器(〜)

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

或将标记更改为

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

FIDDLE

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