汉堡菜单 css 光标答案

【问题标题】：Hamburger menu css cursor汉堡菜单 css 光标
【发布时间】：2016-08-01 19:18:24
【问题描述】：

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

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

【问题讨论】：

一种解决方案是将input 和label 包装在一个本身应用了cursor:pointer 样式的DIV 中。无论如何，这似乎是你为了更容易定位而包装的东西。
我试过了，现在看来，当鼠标悬停在汉堡菜单上时，除了单击之外，指针也可以工作。知道为什么吗？

【解决方案1】：

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

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

【讨论】：

【解决方案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/

【讨论】：