Mauszeiger & Cursor: Anzeigemöglichkeiten

Der Cursor bzw. Mauszeiger (oft ein Mauspfeil) kann über CSS entsprechend beeinflusst werden, welches Symbol angezeigt wird. Hier haben wir viele verschiedene Möglichkeiten. Im Folgenden eine Auflistung mit Testmöglich und den entsprechenden CSS-Anweisungen, damit man selber schnell das gewünschte Aussehen in seinen eigenen Projekten erreicht.

Der CSS-Anweisung cursor wird anhand seines Attributes das gewünschte Aussehen eingestellt. Hier haben wir eine Reihe von Attributen:
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

Die meisten Browser unterstützen einen Großteil der Möglichkeiten, aber nicht alle. Also testen, wenn etwas besonders wichtig ist.

cursor: crosshair

.zeiger_crosshair {
    cursor: crosshair;
}

cursor: help – Mauszeiger als Fragezeichen

.zeiger_help {
    cursor: help;
}

cursor: move – verschiebbar

.zeiger_move {
    cursor: move;
}

cursor: progress – Fortschrittsanzeige

.zeiger_progress {
    cursor:progress;
}

cursor: zoom-out;

.zeiger_zoom-out {
    cursor:zoom-out;
}

cursor: zoom-in;

.zeiger_zoom-in {
    cursor:zoom-in;
}

Besonders interessant ist es, wenn beispielsweise es ein Detailbild zu einem Vorschaubild gibt. Beim Überfahren von dem Vorschaubild ändert sich der Standardmauszeiger zu einem Pfeil. Besser ist es, dass der Mauszeiger zum Lupensymbol wird. Dies ist über die oben gezeigte CSS-Anweisung cursor:zoom-in; problemlos möglich.