漢堡菜單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

回答