Html 汉堡菜单css光标

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

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

---

这是我的问题的链接：

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

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

只需将您的

和

标记放在一个

具有

光标：指针的
内在CSS上设置

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

如果要进行进一步更改，只需随意调整
#菜单
的属性即可

工作结果：
一种解决方案是将您的
输入
和
标签
包装在一个DIV中，该DIV本身应用了
光标：指针
样式。似乎你已经包装好了，以便更容易定位。我试过了，现在指针在汉堡包菜单上悬停时似乎可以工作，除了点击。知道为什么吗？指针现在工作了，但是当我在白线之间点击它时，它根本不会触发。知道为什么会发生这种情况吗？这是因为状态更改链接到导航触发器，而不是菜单。您必须在CSS中更新它（将操作从nav触发器移动到我们刚刚创建的菜单div）
#menu {
    cursor: pointer;
    right: 15px;
    height: 25px;
    width: 35px;
    position: fixed;
}