汉堡菜单css光标

Question

我只是用CSS玩汉堡菜单。我遇到的一件事是光标指针。当我把光标悬停在汉堡包按钮上时，如果它在白线之间，它就不会变为指针。它只有在悬停在白线上时才起作用。我试着想办法解决这个问题，但到目前为止没有成功。任何帮助都将不胜感激！

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

以下是我的问题链接：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>标记放在CSS上设置了cursor:pointer;的<div>中即可。

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