cursor
The cursor property sets the mouse pointer shown when hovering over an element.
Syntax
cursor: auto | pointer | default | text | not-allowed | grab | wait;
Examples
button { cursor: pointer; }
[disabled] { cursor: not-allowed; }
.draggable { cursor: grab; }
Output
Shows a hand on buttons, a blocked symbol on disabled controls, and a grab hand on draggable items.
Notes
Use pointer only for genuinely clickable elements. Cursor is purely cosmetic and has no effect on touch or keyboard users, so do not rely on it to convey state. Custom images use url() with a fallback keyword.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |