汉堡包菜单（两行之间不可点击）

Question

我遇到了一个问题，我试图在黑线之间点击但没有触发任何东西，但是当点击黑线时触发。我添加了 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 的 link：https://jsfiddle.net/dxs6040/51wdfypj/14/

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

汉堡包菜单（两行之间不可点击）

Hamburger menu (Between lines are unclickable)

html

css

css-position

css-selectors

pseudo-element