Question

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

Jsfiddle here。

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元素的下一个兄弟（即：同一父母的下一个孩子）

您在DOM中根本没有任何ID为#menuOverlay的元素。

这对你当前的css有用的唯一方法如下：

＆＃13;

#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%;
    }
}

＆＃13;

<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>

＆＃13;

Answer 2

正确添加菜单Overlay：

http://jsfiddle.net/e230cpwz/1/

<div id="menuTab"><input type="checkbox" id="menuToggle" />&equiv;
    <div id="menuOverlay" >
    </div>
</div>

CSS复选框事件不起作用

2 个答案: