汉堡菜单 css 光标

Question

我只使用 CSS 来玩汉堡菜单。我遇到的一件事是光标指针。当我将光标悬停在汉堡包按钮上时，如果它在白线之间，它不会变为指针。它仅在悬停在白线上时有效。我试着弄清楚如何解决这个问题，但到目前为止还没有运气。如有任何帮助，我们将不胜感激！

.nav-trigger {
    cursor: pointer;
    clip: rect(0, 0, 0, 0);
    position: absolute;
    z-index: 2;
}

这是我的问题的link：https://jsfiddle.net/dxs6040/51wdfypj/2/

Answer 1

用 div 包装您的标签并设置如下样式；

position: fixed;
top: 5px;
right: 15px;
height: 25px;
width: 35px;
cursor: pointer;

Answer 2

只需将您的 <input> 和 <label> 标签放入 <div> 中，并在 CSS 上设置 cursor:pointer;。

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

在您的 CSS 文件中，添加：

#menu {
    cursor: pointer;
    right: 15px;
    height: 25px;
    width: 35px;
    position: fixed;
}

如需进一步修改，只需随意调整#menu的属性即可。

工作结果： https://jsfiddle.net/emur3bgf/