汉堡菜单css光标

我正在玩使用CSS的汉堡菜单。我遇到的一件事是光标指针。当我将光标悬停在汉堡按钮上时，如果它位于白线之间，它将不会更改为指针。它只在悬停在白线上时才起作用。我试图找出如何解决这个问题，但目前为止没有运气。任何帮助，将不胜感激！汉堡菜单css光标

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

一个解决办法是来包装你'input'和'label'在DIV本身有'光标：应用pointer'风格。看起来好像你为了更容易定位而包装的东西。 –

我试过了，现在看起来指针工作时，在整个汉堡包菜单上除了点击。任何想法为什么？ –

只要把你的<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的属性。

2016-08-01 19:37:25 SexualPotatoes

指针现在可以工作，但是当我在白线之间点击它时，它根本不会触发。任何想法为什么会发生？ –

这是因为状态更改链接到导航触发器，而不是#menu。你必须在CSS中更新它（将动作从nav-trigger移动到我们刚创建的菜单div） – SexualPotatoes

包装你标签与股利和设置样式像下面;

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

2016-08-01 19:36:29

回答