这是制作手机菜单的脚本。当悬停#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>
&#13;
答案 0 :(得分:1)
正如Paulie_D所说,当你将鼠标悬停在元素A上时,你不能将元素B作为目标,除非它是一个孩子或一个兄弟元素。一种解决方案是在两个元素周围放置一个包装器,然后当您将鼠标悬停在#menu-button上时,使用兄弟选择器OnCounterChange onCounterChange;
来定位#menu。
请参阅this JSBin的示例,稍微改编自您的。
您编写文字的方式,>
正在选择ID为#menu-button:hover #menu { ... }
的元素,其中在内的另一个元素menu
< / p>
答案 1 :(得分:0)
虽然您的代码中没有提及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}}按钮。