pelicin › web › CSS

Cursor

The cursor CSS property sets the appearance of the mouse cursor.

Basic Concepts

Custom Cursors

You can specify zero or more custom cursors using url(...).

For each one, you can optionally specify <x> AND <y> values (ranging from 0 to 32) which determines the cursor "hotspot" coordinate (the coordinate of the cursor that interacts with elements).

div {
  cursor: url(cursor1.png);
  cursor: url(cursor1.png) 1 1;
}

Cursor Keywords

When specifying the value of cursor, you will always specify one of these mandatory cursor keywords as the last value (after listing custom cursors):

KeywordPreview / Description
General
autoLet the browser decide automatically depending on the context
noneDon't display the cursor
defaultPreview of default
pointerPreview of pointer
not-allowedPreview of not-allowed
Selection
textPreview of text
vertical-textPreview of vertical-text
crosshairPreview of crosshair
cellPreview of cell
Drag & Drop
movePreview of move
grabPreview of grab
grabbingPreview of grabbing
no-dropPreview of no-drop
Resizing & Scrolling
all-scrollPreview of all-scroll
col-resizePreview of col-resize
row-resizePreview of row-resize
n-resizePreview of n-resize
e-resizePreview of e-resize
s-resizePreview of s-resize
w-resizePreview of w-resize
ne-resizePreview of ne-resize
nw-resizePreview of nw-resize
se-resizePreview of se-resize
sw-resizePreview of sw-resize
ns-resizePreview of ns-resize
ew-resizePreview of ew-resize
nesw-resizePreview of nesw-resize
nwse-resizePreview of nwse-resize
Zooming
zoom-inPreview of zoom-in
zoom-outPreview of zoom-out
Others
context-menuPreview of context-menu
helpPreview of help
aliasPreview of alias
copyPreview of copy
progressPreview of progress
waitPreview of wait

CSS Properties

cursor

Sets the appearance of the cursor property. Specify:

  • zero or more url(...) or url(...) <x> <y> (each one representing link to custom cursor and the cursor's hotspot coordinate)
  • AND one cursor keyword (e.g. pointer)
div {
  cursor: pointer;
  cursor: url(hand.cur), pointer;
  cursor: url(cursor1.png) 4 12, auto;
}

References