Den Mauszeiger mit CSS für eine bessere Benutzererfahrung (oder zum Spaß) ändern

CSS kann das Aussehen eines Cursors steuern. Es gibt eine Vielzahl von Optionen, die uns zur Verfügung stehen, und wir haben sie hier auf CSS-Tricks im Almanac recht ausführlich behandelt.

Dennoch werden Mauszeiger und ihr Einfluss auf die Benutzererfahrung unserer Websites leicht übersehen. Erinnern Sie sich, als wir erfuhren, dass `::selection` existiert und jede Website es verwendete, um die Hintergrundfarbe von Textauswahlen zu personalisieren? Das Anpassen von Mauszeigern ist genauso einfach und fügt bei richtiger Anwendung einen zusätzlichen Hauch von dezenter Eleganz hinzu.

In diesem Beitrag werde ich zwei Wege aufzeigen, wie die Steuerung des Mauszeigers mit CSS die Benutzererfahrung verbessern kann.

Den richtigen Mauszeiger für ein Element verwenden

Einige Mauszeigeränderungen sind in den Standard-Stylesheets des Benutzeragenten integriert. Nehmen Sie zum Beispiel Links (`<a>`). Selbst wenn wir in unserem CSS nichts weiter tun, haben Links `color: blue;` und `text-decoration: underline;`. Dies ist ein solider visueller Hinweis darauf, dass der hyperverlinkte Text klickbar ist.

Browser gehen noch einen Schritt weiter. Wenn Sie mit der Maus über den Link fahren, ändert sich der Mauszeiger vom standardmäßigen schwarzen Pfeil zu einer Hand mit ausgestrecktem Zeigefinger, auch bekannt als Zeiger.

Es gibt jedoch Zeiten, in denen das Standardverhalten des Mauszeigers aus den Stylesheets des Benutzeragenten nicht ausreicht. In diesen Fällen sollten wir den Mauszeiger so ändern, dass er die erwartete Benutzerinteraktion auf diesem Element widerspiegelt.

Nehmen Sie die `draggable()`-Funktion von jQueryUI. Wir können sie auf ein Element anwenden, und sie ermöglicht einem Benutzer, dieses Element im Ansichtsfenster anzuklicken und zu ziehen, aber der Benutzer wird dies nie erfahren, wenn der Mauszeiger in seinem Standardzustand bleibt. Das Hinzufügen von `cursor: move;` zum Element würde helfen, das Problem zu lösen.

Siehe den Pen QNqMRp von Geoff Graham (@geoffgraham) auf CodePen.

Das Gleiche gilt für eine Reihe von Szenarien, egal ob wir über Formulareingaben, Bilder oder so ziemlich alles andere sprechen, was Sie sich vorstellen können. Nutzen Sie immer die Gelegenheit, den Mauszeiger eines Elements an sein Verhalten anzupassen, wenn der Standardpfeil kein ausreichender Hinweis ist. Hier ist eine Demo von allem, was derzeit verfügbar ist.

Siehe den Pen The Cursors! von Chris Coyier (@chriscoyier) auf CodePen.

Einen benutzerdefinierten Mauszeiger zur Verbesserung eines Elements verwenden

Was ist mit *benutzerdefinierten* Mauszeigern, fragen Sie? Wie in, ein Bild Ihrer eigenen Kreation, das den Mauszeiger ersetzt. Natürlich ist das möglich!

Wir können der `cursor`-Eigenschaft wie folgt ein Bild zuweisen

.module {
  cursor: url('path-to-image.png'), auto;	
}

Ich finde, das ist nützlich, wenn ein Hauch von Personalisierung gut passt, der Benutzer es aber vielleicht nicht erwartet. Zum Beispiel ein Formular, bei dem die Antwort auf eine Frage mit einer bestimmten Emotion korrespondiert.

Siehe den Pen qZjwGe von Geoff Graham (@geoffgraham) auf CodePen.

Die Arbeit mit Emoji war an sich schon ein kleines Kunststück. Sie können Emoji von einer Website wie dieser kopieren und einfügen, dann in einen Texteditor einfügen und als PDF speichern, das dann in Illustrator geöffnet werden kann. Von dort aus konnte ich das Bild auswählen, in Photoshop einfügen und ein PNG-Bild mit transparentem Hintergrund erstellen. Zack!

Für diejenigen unter Ihnen, die sich für SVG interessieren: Ich freue mich, sagen zu können, dass es funktioniert! Die `cursor`-Eigenschaft akzeptiert SVG-Dateien in ihrer ganzen Pracht. Keine animierten GIFs, leider.

Siehe den Pen QNgoQW von Geoff Graham (@geoffgraham) auf CodePen.

Also leider keine animierten Mauszeiger, es sei denn, Sie machen etwas Verrücktes wie das Ausblenden des Mauszeigers (`cursor: none;`), die Verfolgung der Mausposition mit JavaScript und das Anzeigen von etwas komplett Benutzerdefiniertem.

Ähm, wie das hier!

Siehe den Pen Animation following cursor von tamm (@tamm) auf CodePen.

Weitere Beispiele aus dem Web

Es ist schwieriger als man denken könnte, gute Beispiele für benutzerdefinierte Mauszeiger zu finden. Vielleicht wird es nicht so häufig verwendet wie andere CSS-Funktionen oder wir sind immer noch dabei, es herauszufinden, aber hier sind einige Websites, auf denen es gut eingesetzt wurde.

• Denis Rouves Portfolio
• 90er-Jahre-Emoji-Mauszeiger
• Schleimiger Mauszeiger
• Kairo-Mauszeiger
• jQuery Awesome Cursor

Zusätzliche Lektüre

• Cursor im Almanach
• Verwendung von URL-Werten für die `cursor`-Eigenschaft auf MDN
• CSS Basic User Interface Module Level 3
• Demo aller verfügbaren Mauszeiger