cursor

Die `cursor`-Eigenschaft in CSS steuert, wie der Mauszeiger aussieht, wenn er sich über dem Element befindet, auf das diese Eigenschaft angewendet wird. Offensichtlich ist sie nur in Browsern/Betriebssystemen relevant, in denen es eine Maus und einen Cursor gibt. Sie werden im Wesentlichen für die Benutzererfahrung verwendet, um die Idee einer bestimmten Funktionalität zu vermitteln. Versuchen Sie also, diese Interaktion nicht zu stören.

Es gibt eine ganze Reihe davon

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

Der Cursor kann auch ein Bild sein

.custom {
  /* The second value here is a fallback. */
  cursor: url(images/my-cursor.png), auto;

  /* You may need coordinates to adjust the pointer
     for example, the custom cursor is circular and you want
     the middle to be where you click */
  cursor: url(target.svg) 15 15, move;
}

Einige WebKit-spezifische Cursor

-webkit-zoom-in
-webkit-zoom-out
-webkit-zoom-grab
-webkit-zoom-grabbing

Weitere Informationen

• CSS Basic User Interface Module Level 3
• Mozilla Docs

Browser-Unterstützung

Und für neuere Werte wie `zoom-in` und `zoom-out`