Cursor – Mauszeiger

Der Cursor (Mauszeiger) ist ein wichtiges Feedback-Element im Web. Die CSS-Eigenschaft cursor legt fest, welches Mauszeiger-Symbol über einem Element angezeigt wird. So signalisiert der Cursor mögliche Aktionen oder Zustände – etwa klicken, verschieben, warten oder Text markieren.

---

Cursor auf einen Blick

---

Vordefinierte Cursor

CSS bietet vordefinierte Cursor-Werte für unterschiedliche Aktionen und Zustände.

Allgemeine Cursor

• auto Standardwert – der Browser wählt abhängig vom Element einen passenden Cursor.
• default Zeigt unabhängig vom Element den Standard-Pfeil.
• none Blendet den Cursor vollständig aus.

Wichtig: auto ist der eigentliche CSS-Standardwert, nicht default. Bei auto entscheidet der Browser abhängig vom Element; default zeigt auch über einem Textfeld den Standard-Pfeil.

---

Aktionen

• pointer Hand mit ausgestrecktem Zeigefinger – für Links und klickbare Elemente.
• help Signalisiert, dass zusätzliche Informationen oder Hilfe verfügbar sind.
• context-menu Signalisiert, dass ein Kontextmenü verfügbar ist.

.link {
    cursor: pointer;
}

.hilfe {
    cursor: help;
}

.kontextmenu {
    cursor: context-menu;
}

---

Status

• wait Die Anwendung ist beschäftigt und die Oberfläche vorübergehend blockiert.
• progress Ein Prozess läuft, die Oberfläche bleibt aber bedienbar.
• not-allowed Die gewünschte Aktion ist an dieser Stelle nicht erlaubt.

.loading {
    cursor: wait;
}

.processing {
    cursor: progress;
}

button:disabled {
    cursor: not-allowed;
}

Wichtig: Bei wait ist die Oberfläche vorübergehend blockiert, bei progress bleibt sie bedienbar. Wie die Cursor aussehen, hängt vom Betriebssystem und Browser ab.

---

Auswahl

• text Text kann horizontal ausgewählt werden.
• vertical-text Vertikal gesetzter Text kann ausgewählt werden.
• cell Eine Tabellenzelle kann ausgewählt werden.
• crosshair Präzise Auswahl, beispielsweise auf einer Zeichenfläche.

.textbereich {
    cursor: text;
}

.zeichenflaeche {
    cursor: crosshair;
}

---

Drag & Drop

• move Das Element kann verschoben werden.
• grab Das Element kann gegriffen werden.
• grabbing Das Element wird gerade gegriffen.
• copy Beim Ablegen wird eine Kopie erstellt.
• alias Beim Ablegen wird eine Verknüpfung erstellt.
• no-drop Das Element kann an dieser Stelle nicht abgelegt werden.
• all-scroll Das Element kann in alle Richtungen gescrollt werden.

.draggable {
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

---

Grössenänderung

Resize-Cursor zeigen, in welche Richtung ein Element vergrössert oder verkleinert werden kann.

• n-resize / s-resize Grössenänderung nach oben oder unten.
• e-resize / w-resize Grössenänderung nach rechts oder links.
• ne-resize / nw-resize Diagonale Grössenänderung nach oben.
• se-resize / sw-resize Diagonale Grössenänderung nach unten.
• ew-resize / ns-resize Bidirektionale horizontale oder vertikale Grössenänderung.
• nesw-resize / nwse-resize Bidirektionale diagonale Grössenänderung.
• col-resize / row-resize Spalten- oder Zeilengrösse verändern.

.cursor-ew-resize {
    cursor: ew-resize;
}

.cursor-ns-resize {
    cursor: ns-resize;
}

.cursor-nwse-resize {
    cursor: nwse-resize;
}

---

Zoom

• zoom-in Der Inhalt kann vergrössert werden.
• zoom-out Der Inhalt kann verkleinert werden.

.zoomable {
    cursor: zoom-in;
}

.zoomable.zoomed {
    cursor: zoom-out;
}

---

Benutzerdefinierte Cursor

Mit url() können eigene Cursor-Bilder eingebunden werden. Ein Fallback-Wert ist dabei zwingend erforderlich.

cursor: url('custom-cursor.png'), pointer;
cursor: url('hand.cur'), grab;
cursor: url('cursor.svg'), auto;

Technische Anforderungen

• PNG wird zuverlässig unterstützt, SVG und CUR ebenfalls in gängigen Desktop-Browsern
• Empfohlene Grösse: 32 × 32 Pixel oder kleiner
• Sehr grosse Cursor-Bilder werden vom Browser möglicherweise ignoriert
• Die Hotspot-Koordinaten werden von der linken oberen Ecke aus gemessen
• Immer einen Fallback-Cursor angeben

/* Hotspot: 8 Pixel von links und oben – Fallback: crosshair */
.custom-tool {
    cursor: url('precision.cur') 8 8, crosshair;
}

Beispiel: SVG als Cursor, ohne separate Bilddatei

Ein SVG lässt sich direkt als data:-URI einbetten – ohne separate Datei. Der Hotspot sitzt hier in der Mitte der Blüte.

.custom-cursor-box {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
        <circle cx="12" cy="6" r="4" fill="deeppink"/>
        <circle cx="12" cy="18" r="4" fill="deeppink"/>
        <circle cx="6" cy="12" r="4" fill="deeppink"/>
        <circle cx="18" cy="12" r="4" fill="deeppink"/>
        <circle cx="12" cy="12" r="4" fill="gold"/>
    </svg>') 12 12, pointer;
}

---

Cursor und pointer-events

Bei pointer-events: none wird ein Element bei Zeiger-Interaktionen übersprungen. Dadurch wird auch der auf diesem Element definierte Cursor ignoriert. Der Browser zeigt stattdessen den Cursor des darunterliegenden Elements.

.overlay {
    pointer-events: none;
    cursor: default; /* bleibt wirkungslos */
}

Mehr dazu findest du in der Lektion zu CSS Pointer Events.

---

Best Practices

• Bekannte Cursor verwenden – Nutze standardisierte Cursor für vertraute Aktionen und Zustände.
• Cursor konsistent einsetzen – Gleichartige Elemente sollten denselben Cursor verwenden.
• Funktion nicht nur über den Cursor zeigen – Auf Touch-Geräten und bei Tastaturbedienung ist kein Mauszeiger sichtbar.
• Elemente korrekt deaktivieren – cursor: not-allowed zeigt nur einen Zustand und ersetzt nicht das native disabled.
• Fallback für eigene Cursor – Benutzerdefinierte Cursor benötigen immer einen passenden Standard-Cursor als Fallback.
• Eigene Cursor klein halten – Grosse oder animierte Cursor-Dateien können unzuverlässig dargestellt oder ignoriert werden.

---

Kurz gesagt

• auto ist der Standardwert; default zeigt unabhängig vom Element den Standard-Pfeil.
• Vordefinierte Cursor signalisieren mögliche Aktionen oder den aktuellen Zustand eines Elements.
• Ein Cursor gibt nur visuelles Feedback – er fügt einem Element keine Funktion hinzu.
• not-allowed zeigt eine nicht erlaubte Aktion, ersetzt aber kein natives disabled.
• Benutzerdefinierte Cursor benötigen einen Fallback; mit Hotspot-Koordinaten wird der genaue Klickpunkt festgelegt.
• Bei pointer-events: none wird auch der Cursor des übersprungenen Elements ignoriert.

---

Weitere Interaktionen:
CSS-Outline – sichtbare Fokus-Markierungen und Tastaturbedienung
CSS-Pointer-Events – Klicks steuern und durchreichen

---