Cursor und Anzeigemöglichkeiten des Mauspfeils

Der Cursor 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 dem Attribut 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;
}
Beispielbereich

cursor: help – Mauszeiger als Fragezeichen

.zeiger_help {
    cursor: help;
}
Beispielbereich

cursor: move – verschiebbar

.zeiger_move {
    cursor: move;
}
Beispielbereich

cursor: progress –

.zeiger_progress {
    cursor:progress;
}
Beispielbereich

cursor: zoom-out;

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

cursor: zoom-in;

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

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.