为什么这个 html / css 没有做我想要的答案

【问题标题】：Why is this html / css not doing what i want为什么这个 html / css 没有做我想要的
【发布时间】：2015-11-25 15:40:04
【问题描述】：

这是一个制作电话菜单的脚本。当悬停#menu_button 时，#menu 需要出现。但什么也没发生。我该如何解决这个问题？

随时提出改进我的代码的建议，我是 html 和 css 的初学者。

* {
    margin: 0;
    padding: 0;
}
#menu {
    height: 100%;
    width: 100%;
    background-color: skyblue;
    display: none;
    
}
#header {
    background-color: lightblue;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    
}
#menu_button {
    float: left;
    width: 60px;
    height: 60px;
    background-image: url(img/menu_button.png);
    background-size: 60px 60px;
    
}   
#menu_button:hover #menu {
    display: block;
    
}

<html>
    <body>
        <div id="header">
            <div id="menu_button">
            </div>
        </div>

        <div id="menu">
        </div>
    </body>
</html>

【问题讨论】：

因为#menu 与#menu-button 无关，它不是一个孩子（如您的CSS 所建议的那样）或兄弟姐妹。实际上，您需要悬停标题才能影响#menu。
悬停只会影响兄弟姐妹和孩子。如果你想影响除此之外的东西，你必须使用 Javascript。
附带说明：如果您引用移动设备页面（电话菜单），用户通常没有机会悬停某些内容。

标签： html css mobile menu

【解决方案1】：

正如 Paulie_D 所说，当悬停在元素 A 上时，您不能定位元素 B，除非它是子元素或兄弟元素。一种解决方案是在两个元素周围放置一个包装器，然后在将鼠标悬停在 #menu-button 上时使用兄弟选择器 > 来定位 #menu。

参见this JSBin 的示例，稍微改编自您的。

按照您的写法，#menu-button:hover #menu { ... } 选择了一个 ID 为 menu 的元素，该元素位于另一个 ID 为 menu-button 的元素的内部

【讨论】：

【解决方案2】：

虽然你的标签中没有提到 JavaScript/jQuery，但我在这里创建了一个小提琴，可以在 jQuery 中为你做这件事：https://jsfiddle.net/7g80vgv9/

CSS（本例稍作修改）：

* {
    margin: 0;
    padding: 0;
}
#menu {
    height: 500px;
    width: 200px;
    background-color: skyblue;
    display: none;

}
.show {
    display: block !important;
}
#header {
    background-color: lightblue;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;

}
#menu_button {
    float: left;
    width: 60px;
    height: 60px;
    background-color: black;
    background-size: 60px 60px;

}

HTML（不变）：

 <body>
        <div id="header">
            <div id="menu_button">
            </div>
        </div>

        <div id="menu">
        </div>
    </body>

jQuery：

$("#menu_button").hover(function() {
   $("#menu").toggleClass("show");
});

如您所见，我创建了一个名为 show 的新 CSS 类，它使用 display: block !important 覆盖默认情况下 #menu 上的 display: none。

然后，jQuery 通过检测用户何时将鼠标悬停在 #menu_button 上并执行代码来发挥作用，在这种情况下，代码是为 #menu 按钮添加/删除（切换）show 类。

【讨论】：