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

这是一个制作手机菜单的脚本。将鼠标悬停在#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>

最佳答案

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

参见 this JSBin举个例子，稍微改编自你的。

按照您编写的方式，#menu-button:hover #menu { ... } 正在选择 ID 为 menu 的元素，即 inside id 为 menu-button

的另一个元素

关于html - 为什么这个 html/css 没有做我想要的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33920623/