Sie können für ein HTML-Element einen Cursor definieren. Wenn der Anwender mit der Maus über die Fläche fährt, die das Element einnimmt, nimmt der Mauszeiger die angegebene Gestalt an.
<h1 draggable="true" style="cursor: move;">Zieh mich</h1> <h1 style="margin-top: 100px;" ondragover="return false"> und lass mich hier los</h1>
Mit cursor: können Sie das Aussehen des Mauszeigers für den Fall definieren, dass der Anwender mit der Maus über den entsprechenden Bereich fährt. Im obigen Beispiel wird das Schlüsselwort move zugewiesen, dass einen Cursor formt, der signalisiert, dass das Element mit der Maus „gezogen“ (drag) werden kann. Dazu erhält das h1-Element im Beispiel zusätzlich ein draggable-Attribut. Das zweite h1-Element wird durch ondragover="return false" zu einem potentiellen Loslass-Ziel (drop) für Elemente, die gerade mit der Maus gezogen werden. In der obigen Form funktioniert das Beispiel zwar in neueren Browsern, doch ohne Scripting geschieht bei dem Drag&Drop-Vorgang nichts weiter.
Folgende Angaben sind bei der CSS-Eigenschaft cursor: erlaubt:
auto bewirkt einen automatischen Cursor (Normaleinstellung).
default bewirkt einen plattformunabhängigen Standard-Cursor.
crosshair bewirkt einen Cursor in Form eines einfachen Fadenkreuzes.
pointer bewirkt einen Cursor in Form eines Zeigers.
move bewirkt einen Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert.
n-resize bewirkt einen Cursor in Form eines Pfeils, der nach oben zeigt (n = Norden).
ne-resize bewirkt einen Cursor in Form eines Pfeils, der nach rechts oben zeigt (ne = Nordost).
e-resize bewirkt einen Cursor in Form eines Pfeils, der nach rechts zeigt (e = Osten).
se-resize bewirkt einen Cursor in Form eines Pfeils, der nach rechts unten zeigt (se = Südost).
s-resize bewirkt einen Cursor in Form eines Pfeils, der nach unten zeigt (s = Süden).
sw-resize bewirkt einen Cursor in Form eines Pfeils, der nach links unten zeigt (sw = Südwest).
w-resize bewirkt einen Cursor in Form eines Pfeils, der nach links zeigt (w = Westen).
nw-resize bewirkt einen Cursor in Form eines Pfeils, der nach links oben zeigt (nw = Nordwest).
text bewirkt einen Cursor in einer Form, die normalen Text symbolisiert.
wait bewirkt einen Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
help bewirkt einen Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
progress bewirkt einen Cursor in Form eines Symbols, das einen Programmfortschritt signalisiert, welcher aber anders als wait eine Interaktion zulässt. Dieser Wert wurde mit CSS 2.1 eingeführt.
Mit cursor: url([Datei]); können Sie außerdem eigene Bilddateien als Mauszeiger definieren. Dieses Feature wurde ebenfalls mit CSS2.1 eingeführt.
Zwingend ist für alle Browser, die das Feature unterstützen, dass zusätzlich zur Grafikangabe auch eine Alternative in Form einer Standardangabe berücksichtigt wird. Es ist außerdem möglich, ähnlich wie bei Schriftarten mehrere externe Grafiken aufzulisten. Trennen Sie alle einzelnen Angaben durch ein Komma, beispielsweise cursor: url(cursor.gif), move;.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.