汉堡菜单(行间不可点击)

时间:2016-08-02 15:52:42

标签: html css css-selectors css-position pseudo-element

我遇到了一个问题,我试图在黑线之间点击它并没有触发任何东西,但在点击黑线时触发。我添加了div,以便我可以在该区域周围添加光标指针。我知道它必须是位于html中的for = nav-trigger,但是“for”不适用于div。有解决方法吗?

<div id="menu">
  <input type="checkbox" id="nav-trigger" class="nav-trigger"/>
  <label id="menuButton" for="nav-trigger"></label>
</div>

以下是jsfiddle的链接:https://jsfiddle.net/dxs6040/51wdfypj/14/

1 个答案:

答案 0 :(得分:1)

使用像这样的html:

<div id="menu">
  <label for="nav-trigger">
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <span id="menuButton"></span>
  </label>
</div>

并将其添加到css:

label {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

的jsfiddle: https://jsfiddle.net/e9qafkbr/