CSS复选框事件不起作用

Question

我正在尝试使用div(用于菜单)覆盖页面,当选中复选框按钮时,但它似乎不起作用.事件没有解雇吗？

Jsfiddle 在这里.

HTML

<nav>
    <div id="topBar"></div>
    <div id="menuTab"><input type="checkbox" id="menuToggle">&equiv;</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;
    }
}

Answer 1

您没有使用正确的+选择器.

B + E:任何E元素,它是B元素的下一个兄弟(即:同一父元素的下一个子元素)

#menuOverlayDOM中没有任何带id的元素.

这将适用于您当前的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" />&equiv;
        <div id="menuOverlay"></div> <!-- add div element here with id menuOverlay -->
    </div>
</nav>
<section>
    <div id="slide1" class="slide"></div>
</section>