CSS-Cursor-Übersicht
Alle CSS-Cursor live ausprobieren und per Klick kopieren – plus eigener Cursor aus einem Bild mit Hotspot und Fallback.
Die CSS-Cursor-Übersicht zeigt alle Werte der Eigenschaft cursor live: einfach mit der Maus über eine Kachel fahren und per Klick den Code kopieren. Dazu kommt ein Generator für eigene Mauszeiger aus einem Bild, mit einstellbarem Hotspot, passendem Fallback und Hinweisen zur maximalen Größe.
Allgemein
Links und Status
Auswahl
Ziehen und Ablegen
Scrollen und Größe ändern
Zoom
Eigener Cursor aus einem Bild
.element {
cursor: url("cursor.png") 0 0, auto;
}Den Dateinamen an deinen Pfad anpassen.
Cursor gezielt einsetzen
Der Mauszeiger verrät, was an einer Stelle möglich ist. Passende Cursor machen Oberflächen
verständlicher: Die Hand signalisiert einen Link, grab ein verschiebbares
Element, not-allowed eine gesperrte Aktion.
| Situation | Cursor |
|---|---|
| Klickbares Element | pointer |
| Deaktivierter Button | not-allowed |
| Ziehbare Karte | grab / grabbing |
| Bild vergrößern | zoom-in |
| Spaltenbreite ändern | col-resize |
Auf Touch-Geräten gibt es keinen Cursor. Wichtige Hinweise dürfen deshalb nie nur über den Cursor vermittelt werden. Ein Icon in passender Größe erstellst du im Favicon-Generator.
Häufige Fragen
Welcher Cursor gehört auf Buttons?
Browser zeigen bei Buttons standardmäßig den normalen Pfeil, bei Links die Hand (pointer). Viele Websites setzen cursor: pointer auch auf Buttons, damit klickbare Elemente einheitlich wirken. Beides ist üblich.
Wie groß darf ein eigener Cursor sein?
Empfohlen sind 32 × 32 Pixel. Die meisten Browser akzeptieren bis 128 × 128 Pixel, größere Bilder werden ignoriert und der Fallback greift.
Was ist der Hotspot?
Der Punkt im Bild, der als Klickposition gilt. Bei einem Pfeil ist das die Spitze oben links (0 0), bei einem Fadenkreuz die Mitte.
Warum braucht ein eigener Cursor einen Fallback?
Die Syntax schreibt einen Schlüsselwort-Cursor am Ende vor. Er wird genutzt, wenn das Bild nicht lädt oder zu groß ist. Ohne Fallback ist die ganze Deklaration ungültig.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.