The cursor property changes the mouse pointer to match the action a user can take. It is a small detail, but it helps users understand whether something can be clicked, dragged, selected, zoomed, or is temporarily unavailable.
Cursors should confirm behavior that already exists. A hand cursor does not make a div accessible like a button, and a custom cursor does not replace clear labels, focus states, or touch-friendly design.
Add one worked example that compares the normal path with the boundary case for CSS Cursors Types Custom Cursor.
Keep the note tied to a real CSS workflow so the idea is easier to recall later.
CSS Cursors Types Custom Cursor should be studied as a practical CSS lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
CSS Cursors needs more than a syntax memory trick. The important idea is to understand pointer feedback, disabled controls, text selection, resize cursors, and matching cursor choice to interaction in the exact situation where the page topic appears, then prove the behavior with a small working example and one edge case.
The CSS cursor property controls the mouse pointer that appears when a user hovers over an element. A clear cursor can communicate whether something is clickable, draggable, disabled, zoomable, or simply informational.
Good cursor choices improve usability, but they should support the interface rather than replace good labels and layout. If everything gets a fancy cursor, users stop trusting what it means.
| Value | Meaning | Typical Use |
|---|---|---|
| default | Regular arrow pointer | Normal page content |
| pointer | Hand cursor | Buttons, links, interactive cards |
| text | Text selection cursor | Editable or selectable text |
| move | Move indicator | Drag-and-drop interfaces |
| not-allowed | Action unavailable | Disabled controls |
| grab / grabbing | Draggable item | Sliders, canvas panning, sortable lists |
| wait | Busy state | Temporary loading states |
| zoom-in | Can enlarge | Image viewers or previews |
button {
cursor: pointer;
}
input[disabled],
button[disabled] {
cursor: not-allowed;
}
.article-copy {
cursor: text;
}
.draggable-card {
cursor: grab;
}
.draggable-card:active {
cursor: grabbing;
}
.image-preview {
cursor: zoom-in;
}<button>Save</button>
<button disabled>Delete</button>
<p class="article-copy">Select this text.</p>
<div class="draggable-card">Drag me</div>
<img class="image-preview" src="photo.jpg" alt="Preview image">You can use a custom image as the cursor with url(), followed by a fallback keyword. This is useful for specialized tools such as drawing apps or games, but it should be used carefully because custom cursors can feel distracting or inconsistent across devices.
The fallback keyword is important because the browser may ignore unsupported cursor file formats or oversized assets.
.drawing-surface {
cursor: url('brush.cur'), crosshair;
}Use cursor values as interaction hints, not decoration. On touch devices, cursors are not visible, so the interface must still be understandable through layout, labels, states, and spacing.
CSS Cursors Types Custom Cursor matters in CSS because it changes how a program is written, tested, or debugged. The page should explain the normal flow first: what the developer writes, what the runtime or platform does, and what result should appear.
When teaching CSS Cursors Types Custom Cursor, avoid stopping at syntax. Show the surrounding decision: why this feature is chosen, what problem it removes, and what would become harder if the feature were not used.
The cursor property gives users a quick hint about what can happen when they point at an element. cursor: pointer suggests clicking, text suggests text selection, not-allowed suggests a disabled action, and resize cursors suggest dragging. Good cursor usage supports the real interaction instead of decorating randomly.
A cursor should never promise behavior that does not exist. If a card uses cursor: pointer but is not clickable by keyboard or mouse, users get misleading feedback. For accessibility, cursor changes should work with proper semantic elements, focus styles, and disabled states.
.lesson-box {
display: block;
max-width: 42rem;
padding: 1rem;
}.lesson-box:empty::before {
content: "CSS Cursors Types Custom Cursor: add visible content";
}.button { cursor: pointer; }
.button:disabled { cursor: not-allowed; }
.text-editor { cursor: text; }
.column-resizer { cursor: col-resize; }Adding cursor: pointer to a div without keyboard support or button semantics.
Use a real button or link, or add the correct accessibility behavior.
Using not-allowed while the control can still be clicked.
Disable the control behavior as well as changing the cursor.
Using a large decorative custom cursor for normal reading pages.
Reserve custom cursors for specialized tools such as drawing surfaces.
Memorizing CSS Cursors Types Custom Cursor without the situation where it is useful.
Connect CSS Cursors Types Custom Cursor to a concrete CSS task.
Adding cursor: pointer to a div without making it keyboard accessible.
Use a button or link for real actions, then apply cursor styling as supporting feedback.
No. It only changes the pointer icon. The actual click behavior must still be implemented with HTML or JavaScript.
The file format may be unsupported, the image may be too large, or the browser may be falling back to the keyword value.
Usually buttons and links should, but consistency matters more than forcing it on every component style in every design system.
Explore 500+ free tutorials across 20+ languages and frameworks.