Hamburger Menü Css Cursor

Ich spielte mit Hamburger Menü nur mit CSS. Eine Sache, auf die ich stoße, ist der Cursorzeiger. Wenn ich den Mauszeiger über den Hamburger-Knopf halte, würde er nicht zum Zeiger wechseln, wenn er zwischen weißen Linien wäre. Es funktioniert nur, wenn es auf weißen Linien schwebt. Ich habe versucht, herauszufinden, wie ich dieses Problem lösen kann, aber bisher kein Glück. Jede Hilfe wäre willkommen!Hamburger Menü Css Cursor

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

Hier ist der Link zu meinem Problem: https://jsfiddle.net/dxs6040/51wdfypj/2/

Quelle

2016-08-01 Daniel Saavedra

Eine Lösung wäre, die 'input' zu wickeln und' label' in einem DIV, das sich die 'Cursor hatte: pointer' Stil angewendet. Scheint so, als hättest du dich sowieso zur leichteren Positionierung gewickelt. –

Ich habe das versucht und jetzt scheint es, als ob der Zeiger funktioniert, wenn ich über das Hamburger-Menü schwebe, außer beim Klicken. Irgendeine Idee warum? –

Setzen Sie einfach Ihre <input> und <label> Tags innerhalb einer <div> die cursor:pointer; Satz auf Ihrem CSS hat.

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

in Ihrer CSS-Datei hinzufügen:

#menu { 
    cursor: pointer; 
    right: 15px; 
    height: 25px; 
    width: 35px; 
    position: fixed; 
}

Wenn Sie weitere Änderungen vornehmen möchten, einfach die #menu ‚s Eigenschaften nach Belieben anpassen.

Arbeitsergebnis:https://jsfiddle.net/emur3bgf/

Quelle

2016-08-01 19:37:25 SexualPotatoes

Der Zeiger funktioniert jetzt, aber wenn ich ihn zwischen die weißen Linien klicke, wird er überhaupt nicht ausgelöst. Irgendeine Idee, warum das passieren kann? –

Das liegt daran, dass Statusänderungen mit dem nav-trigger verknüpft sind, nicht mit #menu. Sie müssten das im CSS aktualisieren (verschieben Sie die Aktionen von nav-trigger in das Menü div, das wir gerade erstellt haben) – SexualPotatoes

Ihr Etikett mit einem div Wrap und Stile wie unten angegeben;

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

Quelle

2016-08-01 19:36:29

Antwort

Verwandte Themen