我正在尝试使用div(用于菜单)覆盖页面,当选中复选框按钮时,但它似乎不起作用.事件没有解雇吗？
Jsfiddle here.
HTML
<nav>
<div id="topBar"></div>
<div id="menuTab"><input type="checkBox" id="menuToggle">≡</div>
</nav>
<section>
<div id="slide1" class="slide">
</div>
</section>
CSS
#menuToggle {
height: 24px;
width: 24px;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
}
input#menuToggle:checked + #menuOverlay {
position:fixed;
top:0;
left:0;
width:100%;
opacity:0.95;
z-index: 3;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
input#menuToggle:checked + #menuOverlay {
background:#000;
height:100%;
}
}
@media only screen and (min-width: 769px) {
input#menuToggle:checked + #menuOverlay {
background:#1f1f1f;
height:2.4em;
}
}
解决方法
您没有使用正确的选择器.
B + E: Any E element that is the next sibling of a B element (that is:
the next child of the same parent)
你在DOM中根本没有id #menuOverlay的元素.
这将适用于您当前的css的唯一方法如下：
#menuToggle {
height: 24px;
width: 24px;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
}
#menuToggle:checked + #menuOverlay {
position:fixed;
top:0;
left:0;
width:100%;
opacity:0.95;
z-index: 3;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
input#menuToggle:checked + #menuOverlay {
background:#000;
height:100%;
}
}
@media only screen and (min-width: 769px) {
input#menuToggle:checked + #menuOverlay {
background:#1f1f1f;
width:100%;
height:100%;
}
}
<nav>
<div id="topBar"></div>
<div id="menuTab">
<input type="checkBox" id="menuToggle" />≡
<div id="menuOverlay"></div> <!-- add div element here with id menuOverlay -->
</div>
</nav>
<section>
<div id="slide1" class="slide"></div>
</section>
