Mit einem individuellen Mauszeiger kannst Du Deine Website visuell aufwerten und Dich klar von anderen Webseiten abheben. Besonders wirkungsvoll sind Cursor, die thematisch zu Deinen Inhalten passen – zum Beispiel eine Blume als Cursor auf einer Pflanzen- oder Gartenwebsite.
Bevor Du einen eigenen Cursor einsetzt, solltest Du jedoch einen wichtigen Punkt berücksichtigen: Barrierefreiheit und Usability. Ein stark abweichender Mauszeiger kann für manche Nutzer irritierend sein und die intuitive Bedienbarkeit Deiner Seite einschränken. Setze individuelle Cursor daher gezielt und sparsam ein.
Beispiel: Individueller Cursor in der Praxis
Auf dieser Seite wurde beispielhaft ein Garfield-Cursor eingebunden. Wenn Du mit der Maus über den nachfolgenden blauen Bereich fährst, verwandelt sich Dein Mauszeiger entsprechend.
Fahren Sie mit Ihrer Maus über diesen Text bzw. über den blauen Hintergrund und Ihr Mauszeiger verwandelt sich in Garfield! Funktioniert nur auf PC & Notebook… auf dem Smartphone & Tablet gibt es ja keinen Mauszeiger und somit auch keine individuellen Mauszeiger 😉
Wichtig:
Individuelle Mauszeiger funktionieren nur auf Desktop-Geräten (PC & Notebook). Auf Smartphones und Tablets gibt es keinen Mauszeiger – daher werden dort auch keine Custom Cursor angezeigt.
Fertige Cursor-Vorlagen nutzen
Eine einfache Möglichkeit ist die Nutzung fertiger Cursor-Galerien. Dort erhältst Du bereits vorbereitete Mauszeiger inklusive Einbau-Code.
Ein bekannter Anbieter ist:
https://www.cursors-4u.com
Zum Zeitpunkt der letzten Prüfung standen dort über 11.000 verschiedene Mauszeiger zur Verfügung. Die Cursor sind direkt einsatzbereit und lassen sich ohne tiefere Programmierkenntnisse einbinden.
Individuellen Cursor selbst einbinden (HTML & CSS)
Wenn Du Deine Website selbst mit HTML und CSS pflegst, kannst Du einen eigenen Cursor sehr einfach integrieren.
Schritt-für-Schritt-Anleitung
- Cursor-Datei hochladen
Lade die Cursor-Datei auf Deinen Webspace, z. B. ins Hauptverzeichnis.
Übliche Formate sind:.cur(klassisches Cursor-Format).gifoder.png(eingeschränkt unterstützt)
- CSS im Stylesheet ergänzen
body, a:hover {
cursor: url(garfield.cur), progress;
}
Erklärung des Codes
body, a:hover
Definiert den Bereich, in dem der Cursor aktiv ist (hier: gesamte Seite und Links).cursor: url(garfield.cur)
Bindet den individuellen Cursor ein.progress
Ist der Fallback-Cursor, falls der Custom Cursor nicht geladen werden kann.
Dieser Fallback ist wichtig für Kompatibilität und Barrierefreiheit.
Individuellen Cursor in WordPress einbinden
Auch in WordPress lässt sich ein eigener Mauszeiger problemlos nutzen – ohne direkt Dateien bearbeiten zu müssen.
Möglichkeit 1: Über den Customizer (empfohlen)
- Gehe zu Design → Customizer → Zusätzliches CSS
- Füge dort folgenden Code ein:
body, a:hover {
cursor: url(/wp-content/uploads/garfield.cur), progress;
}
Achte darauf, dass der Pfad zur Cursor-Datei korrekt ist.
Möglichkeit 2: Über ein CSS-Plugin
Alternativ kannst Du Plugins wie „Simple Custom CSS“ oder „WP Add Custom CSS“ verwenden und dort denselben Code hinterlegen.
Anbieter & Tools für individuelle Mauszeiger
Cursor-Galerien & Generatoren
| Link zum Anbieter | Beschreibung des Angebots |
|---|---|
| https://anicursor.com | Große Sammlung an Mauszeigern sowie zusätzliche Maus-Effekte wie Mausverfolger |
| https://cursor.cc | Online Cursor-Generator zum Erstellen eigener Mauszeiger |
| https://joescursors.tripod.com | Klassische Cursor-Sammlung von Joe |
| https://www.cursors-4u.com | Über 11.000 fertige Mauszeiger inklusive Einbau-Code |
Zusätzliche Effekte: Sound bei Mouse-Over
Wenn Du Deine Website weiter individualisieren möchtest, kannst Du Mausbewegungen auch mit Sound-Effekten kombinieren. Dabei solltest Du besonders vorsichtig sein, da Sounds schnell als störend empfunden werden.
Nützliche Anleitungen & Beispiele
| Link zum Anbieter | Beschreibung des Angebots |
|---|---|
| https://codepen.io/abirana/pen/GdzQRb | Beispiel für Mouse-Over-Soundeffekte mit JavaScript |
| https://stackoverflow.com/questions/14926306/javascript-play-sound-on-hover-stop-and-reset-on-hoveroff | Detaillierte Erklärung zur Soundsteuerung bei Hover-Effekten |
Fazit
Ein individueller Mauszeiger kann Deine Website optisch aufwerten und für Wiedererkennung sorgen. Wichtig ist, dass Du den Cursor sinnvoll einsetzt, die Bedienbarkeit nicht einschränkst und immer einen Fallback definierst. Sowohl klassische HTML-Websites als auch WordPress-Seiten lassen sich mit wenig Aufwand um einen Custom Cursor erweitern.