Kemmerzell.org


CSS: Den Cursor verändern

Von Maximilian · 02.02.2014 · Kategorie: CSS

Durch die Darstellung verschiedener Cursor-Arten kann man Nutzer sehr einfach darauf hinweisen, welche Aktion mit dem Element, das sich gerade unter dem Cursor befindet, durchgeführt werden kann. So verändert sich der Cursor meist, wenn man mit ihm über einen Button oder aber ein Textfeld fährt. Das passiert meist automatisch. Doch mit Hilfe von ein wenig CSS-Code kann man die Darstellung eines anderen Cursors auch ganz einfach selbst bestimmen. Dies kann in einigen Fällen sehr hilfreich sein. So kann man beispielsweise einen Cursor mit einem Fragezeichen anzeigen lassen, um bei einem Link zu verdeutlichen, dass es über diesen Link zu einer Hilfeseite geht.

Und um dies umzusetzen, braucht man eigentlich nur eine Zeile CSS-Code. Man macht sich dazu nämlich einfach die CSS-Eigenschaft cursor zu Nutze. Dieser kann man dann verschiedene Werte zuweisen. Für einen Cursor mit einem kleinen Fragezeichen würde dies dann beispielsweise folgendermaßen aussehen:

Dem entsprechenden Link zu der Hilfeseite muss dann nur noch die Klasse Hilfe zugewiesen werden. Dann wird automatisch ein entsprechender Cursor angezeigt, wenn man mit dem Cursor über diesen Link fährt. Der HTML-Code für den Link müsste dann also so aussehen:

Aber natürlich kann man dieser CSS-Eigenschaft nicht nur den Wert für einen Cursor mit einem Fragezeichen zuweisen, sondern auch noch für verschiedene andere Cursor-Arten. So gibt es auch noch die Werte hand (für eine Hand), crosshair (für ein Fadenkreuz), move (für ein Kreuz mit Pfeilen), text (für Textmarkierungen oder Textfelder), wait (für eine Sanduhr), n-resize (für Pfeile nach oben und unten), w-resize (für Pfeile nach links und rechts) und ne-resize (für Pfeile nach links unten und rechts oben).

Für einige Anwendungsfälle kann diese Anpassung des Cursors durchaus sinnvoll sein. Allerdings sollte man dies auch nicht übertreiben und die Nutzer dadurch verwirren. Denn meist erkennen die Browser es schon selbst recht gut, ob der Cursor geändert werden sollte. Außerdem sind die verschiedenen Cursor-Arten für bestimmte Aktionen bekannt und sollten nicht unbedingt für andere Aktionen auf Internetseiten genutzt werden. Denn auch das kann zu Verwirrungen bei den Nutzern kommen. Dennoch kann der Einsatz dieses CSS-Codes in einigen Fällen eben auch sehr sinnvoll sein.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Einen eigenen Kommentar hinterlassen




Newsletter

Um unseren Newsletter zu abonnieren, tragen Sie bitte einfach Ihre Email-Adresse unten ein. Sie werden daraufhin eine Bestätigungsmail erhalten!

Jetzt den RSS-Feed abonnieren!

Klicke hier und abonniere den RSS-Feed, um immer auf dem neusten Stand zu bleiben.

Tipp senden

Du hast etwas entdeckt, über das wir noch nicht berichtet haben? Dann schicke uns doch einen Hinweis zu!

Klicke einfach auf den unteren Button, fülle das Formular aus und wenn das Thema passt, erscheint bei uns schon bald ein Artikel zu deiner Entdeckung.

Jetzt Tipp senden!