Erstellen und Anwenden von benutzerdefinierten Cursors mit CSS und Bildern

Benutzerdefinierte Cursors ermöglichen es Ihnen, das Benutzererlebnis mit visuellen Hinweisen anzupassen, die zu Ihrer Marke oder Ihren kreativen Zielen passen. Ob es sich um ein handgezeichnetes Symbol, einen spielähnlichen Zeiger oder einfach eine unterhaltsame Abwandlung des Standardpfeils handelt – die Erstellung eines benutzerdefinierten Cursors mit CSS ist einfacher als es klingt. Diese Anleitung zeigt Ihnen Schritt für Schritt, wie es geht.

Grundlegende Syntax der CSS-Eigenschaft cursor

CSS bietet eine Vielzahl von integrierten Cursor-Typen. So verwenden Sie sie:

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
.text {
  cursor: text;
}
.help {
  cursor: help;
}
.progress {
  cursor: progress;
}

Diese integrierten Optionen decken Standardinteraktionen ab. Um darüber hinauszugehen, können Sie Ihr eigenes Bild verwenden.

Erstellen eines benutzerdefinierten Cursors aus einem Bild

Um ein Bild als Cursor zu verwenden, können Sie eine URL an die cursor-Eigenschaft übergeben.

Beispiel:

.custom-cursor {
  cursor: url('cursor.png') 4 4, auto;
}

• url('cursor.png') ist Ihr benutzerdefiniertes Bild
• 4 4 ist der Hotspot (wo der Klick registriert wird)
• auto ist der Fallback-Cursor, falls das Bild nicht geladen werden kann

Unterstützte Formate

• .cur und .ico (funktionieren am besten unter Windows und Edge)
• .png (funktioniert weitgehend, kann aber Hotspots in einigen Browsern ignorieren)
• .svg (weniger unterstützt für Cursors)

Empfohlene Größe

• Bleiben Sie bei 32x32 Pixeln oder kleiner für konsistentes Verhalten
• Bilder größer als 128x128 könnten ignoriert oder inkonsistent skaliert werden

Cursor nur beim Hover

Um einen benutzerdefinierten Cursor nur beim Überfahren bestimmter Elemente anzuzeigen:

.button:hover {
  cursor: url('hover-cursor.png'), pointer;
}

Dies behält den Standardcursor an anderer Stelle bei und passt das Interaktionsfeedback an.

Cursor-Ausrichtung und Kompatibilitätstipps

• Hotspot-Werte sind entscheidend – sie definieren den aktiven Punkt des Cursors.
• Fallbacks sorgen für eine elegante Degradierung.
• Tests in Chrome, Firefox, Safari und Edge sind unerlässlich.

.cursor-test {
  cursor: url('cursor.png') 16 0, auto;
}

Verwenden Sie Tools wie Browser-Entwicklertools oder Bildbearbeitungsprogramme, um die richtigen Hotspot-Koordinaten zu bestimmen.

Zusätzlicher Tipp: Vermeiden Sie unscharfe Cursors

Einige Browser skalieren PNG-Cursors, wenn sie nicht pixelgenau sind. Um unscharfe Darstellung zu vermeiden:

• Verwenden Sie exakte 1:1-Auflösung (z.B. 32x32)
• Vermeiden Sie transparente Polsterung in Ihren Cursor-Bildern

Benutzerdefinierte animierte Cursors (optional)

Animierte Cursors werden nicht nativ unterstützt, aber es gibt zwei gängige Workarounds:

1. Verwenden Sie ein GIF

.cursor-gif {
  cursor: url('animated-cursor.gif'), auto;
}

• Funktioniert in einigen Browsern, ist aber nicht konsistent.
• GIF kann flackern oder ignoriert werden.

2. Verwenden Sie JavaScript, um die Maus zu verfolgen

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.style.left = e.pageX + 'px';
  cursor.style.top = e.pageY + 'px';
});

Dann stylen Sie das .cursor-div:

.cursor {
  position: fixed;
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('custom.png');
  background-size: cover;
  z-index: 9999;
}

Anwendungsfälle für animierte Cursors

• Spiele und spielerische Benutzeroberflächen
• Benutzerdefinierte kreative Websites oder Portfolios

Barrierefreiheit und UX-Überlegungen

Benutzerdefinierte Cursors sollten die Benutzerfreundlichkeit verbessern – nicht behindern. Beachten Sie:

• Vermeiden Sie das Ersetzen von Cursors bei Eingabefeldern und Links, es sei denn, es erhöht die Klarheit
• Stellen Sie sicher, dass visuelle Designs das erwartete Zeigerverhalten nicht beeinträchtigen
• Verwenden Sie klare Hotspots, um Klick-Fehlanpassungen zu vermeiden

Best Practices

• Testen Sie mit Tastatur- und Screenreader-Benutzern
• Halten Sie Cursors visuell unterscheidbar und leichtgewichtig
• Vermeiden Sie die globale Anwendung von Cursors (z.B. auf body), es sei denn, es macht im Kontext Sinn

Häufige Fallstricke und Debugging

Cursor wird nicht angezeigt?

• Bestätigen Sie, dass der Bildpfad korrekt ist
• Verwenden Sie unterstützte Formate und Abmessungen
• Fügen Sie einen Fallback hinzu: cursor: url(...), auto;

Hotspot falsch ausgerichtet?

• Passen Sie die X- und Y-Koordinaten im cursor-Wert an
• Vorschau in einem Bildbearbeitungsprogramm, um den genauen Klickpunkt zu bestimmen

Funktioniert nicht in Firefox oder Safari?

• Versuchen Sie, .cur oder .ico anstelle von .png zu verwenden
• Vermeiden Sie SVG- und animierte Formate für kritische Interaktionen
• Safari ignoriert einige Bildcursor-Formate vollständig

Anwendung auf das falsche Element

Wenn Ihr Cursor nicht sichtbar ist, stellen Sie sicher, dass das CSS auf das sichtbare und interaktive Element angewendet wird. Zum Beispiel:

body {
  cursor: url('cursor.png'), default;
}

Fazit

Benutzerdefinierte Cursors können Ihrer Benutzeroberfläche Eleganz und Verspieltheit verleihen, bringen aber Browser-Eigenheiten mit sich. Halten Sie sich an gut unterstützte Formate, testen Sie browserübergreifend und fügen Sie immer einen Fallback ein, um die Benutzerfreundlichkeit zu gewährleisten. Verwenden Sie benutzerdefinierte Cursors selektiv dort, wo sie die Klarheit verbessern oder das Branding verstärken, und vermeiden Sie übermäßigen Einsatz, wo sie Benutzer verwirren könnten.

FAQs