Question

这是制作手机菜单的脚本。当悬停#menu_button时，需要出现#menu。但没有任何事情发生。我该如何解决这个问题？

随意提出改进我的代码的建议，我是html和css的首发。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

您编写文字的方式，>正在选择ID为#menu-button:hover #menu { ... }的元素，其中在内的另一个元素menu < / p>

Answer 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: none上使用#menu覆盖默认情况下的display: block !important。

然后jQuery通过检测用户何时悬停在#menu_button上并执行代码来实现魔术，在这种情况下，代码是为{添加/删除（切换）show类{1}}按钮。

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

2 个答案: