Stil mit {stil}

Nov 2008

cursor • CSS für den Mauszeiger

Die Darstellung des Mauszeigers ist ohne CSS-Stil kontextabhängig und wird vom Browser vorgegeben – über Hyperlinks wird der Mauszeiger in allen Browsern automatisch zum Zeigefinger, um auf die Klickbarkeit des Links hinzuweisen. Firefox zeigt über Texten, die sich markieren lassen, den Mauszeiger als senkrechten Strich »I« – Safari zeigt das »I« nur beim Kopieren von Text.

Darüber hinaus kann CSS den Mauszeiger z.B. als Fragezeichen darstellen, um darauf hinzudeuten, dass hier ein Hilfetext vorliegt. In webgestützten Anwendungen kann ein Bild als Mauszeiger deklariert werden.

.maus_url {  cursor: url(key.gif), auto; }

Die meisten Werte für cursor funktionieren heute zuverlässig in allen Browsern – mit kleinen Einschränkungen

• Opera 7 unterstützt die Darstellung des Mauszeigers als Pfeil (alle Werte mit »resize«) und den Wert progress für die Fortschrittskontrolle nicht. Opera Version 9 unterstützt die Werte mit resize, aber progress immer noch nicht.
• Mozilla unterstützt progress ab Version 1.7. Ältere Versionen zeigen bei progress nur den Standard-Mauszeiger. Firefox 3 Mac zeigt kein Bild als Mauszeiger, Firefox 3 Windows zeigt Bilder als Mauszeiger.

CSS für den Mauszeiger: cursor

IE4+ M1 N6 O7 S1 CSS2 Erblich: Ja

cursor

steuert die Darstellung des Mauszeigers. Die meisten Browser unterstützen nicht alle möglichen Darstellungen.

Werte

[ url(urladdress), ]* [ auto | crosshair | default | help | move | pointer | e-resize | n-resize | ne-resize | nw-resize | progress | s-resize | se-resize | sw-resize | w-resize | text | wait ] | inherit

url("urladdress")

ist eine von Kommas getrennte Liste von einer oder mehreren URLs und stellt die Adresse eines eigenen Mauszeigers dar. Browser erkennen eigene Mauszeiger nicht unbedingt, darum ist es besser, einen generischen Mauszeiger (default) an das Ende der Liste zu setzen (ähnlich wie eine generische Schrift »serif« ans Ende einer Schriftenliste). Anders als die vordefinierten Mauszeiger wird ein alternatives Bild für cursor von keinem Browser unterstützt.

auto

ist die Voreinstellung und überlässt dem Browser die Darstellung des Mauszeigers.

crosshair

stellt den Mauszeiger als großes dünnes Pluszeichen dar.

default

überlässt dem Browser die Darstellung des Mauszeigers.

help

stellt den Mauszeiger als Fragezeichen oder Ball dar.

move

betont, dass etwas bewegt werden soll. Üblicherweise ist der Mauszeiger ein Kreuz mit Pfeilen an allen vier Enden.

pointer

stellt den Mauszeiger als Pfeil oder als Händchen mit Zeigefinger dar.

progress

ist ein Fortschritts-Indikator. Das Programm führt eine Aufgabe durch, aber im Gegensatz zur Anzeige »wait« kann der Benutzer weiter mit dem Programm arbeiten.

e-resize

stellt den Mauszeiger als Pfeil dar, der nach rechts (east) weist.

n-resize

stellt den Mauszeiger als Pfeil dar, der nach oben (north) weist.

ne-resize

stellt den Mauszeiger als Pfeil dar, der nach rechts oben (north-east) weist.

nw-resize

stellt den Mauszeiger als Pfeil dar, der nach links oben (north-west) weist.

s-resize

stellt den Mauszeiger als Pfeil dar, der nach unten (south) weist.

se-resize

stellt den Mauszeiger als Pfeil dar, der nach rechts unten (south-east) weist.

sw-resize

stellt den Mauszeiger als Pfeil dar, der nach links unten (south-west) weist.

w-resize

stellt den Mauszeiger als Pfeil dar, der nach links (west) weist.

text

stellt den Mauszeiger als "I" dar, mit dem Text gekennzeichnet und eingefügt wird.

wait

stellt den Mauszeiger üblicherweise als Stundenglas oder Uhr dar, um anzuzeigen, dass der Benutzer noch auf die Bearbeitung eines Prozesses warten muss.

zurück zum Seitenanfang