The CSS cursor property suggests the pointer shape shown when a pointing device is over an element. Use a cursor that matches the element's actual behavior; changing the cursor does not make a non-interactive element interactive.
| CSS | Try it | Typical meaning |
|---|---|---|
cursor: pointer | Link-like or clickable control | |
cursor: text | text | Text can be selected/edited |
cursor: wait | wait | Busy; interaction may be blocked |
cursor: progress | progress | Busy but interaction may continue |
cursor: move | move | Item can be moved |
cursor: crosshair | crosshair | Precise selection |
cursor: help | help | Help is available |
cursor: not-allowed | not-allowed | Requested action is unavailable |
cursor: default | default | Platform default cursor |
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
cursor: hand is not the standard CSS keyword for the familiar pointing-hand cursor. Use cursor: pointer..target {
cursor: url("target.cur") 8 8, crosshair;
}
Always provide a fallback keyword. Browser/platform restrictions can limit custom cursor image size or formats.
Keyboard and touch users may never see a mouse cursor. Interactive elements still need appropriate HTML controls, labels, focus behavior and visible states.
What replaces cursor: hand?
Use cursor: pointer.
Does cursor: pointer make a div clickable?
No. It changes appearance only; use the correct interactive HTML element and behavior.
Can I use a custom cursor image?
Yes, with a URL and fallback keyword, subject to browser restrictions.
CSS generator Borders Heading CSS
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.