cursor
The look of the mouse pointer over the element.
Syntax
cursor: pointer;Values
| Parameter | Type | Description |
|---|---|---|
| pointer | keyword | A hand — for clickable things. |
| default | keyword | The usual arrow. |
| not-allowed | keyword | A crossed circle — the action is unavailable. |
| text | move | help | grab | keyword | Other common pointers: text cursor, moving, help, grabbing. |
Examples
Hover over the blocks:
<style>
div { display: inline-block; padding: 10px; margin: 4px; background: whitesmoke; }
</style>
<div style="cursor: pointer;">pointer</div>
<div style="cursor: not-allowed;">not-allowed</div>
<div style="cursor: help;">help</div>
<div style="cursor: grab;">grab</div>
<div style="cursor: wait;">wait</div>Notes
Links already show pointer; buttons do not by default, so many sites add it. Do not give pointer to things that cannot be clicked — it misleads the user.
See also
- pointer-events — Whether the element reacts to mouse clicks and taps, or lets them pass to what is below.
- :hover — Matches an element while the mouse pointer is over it.
- :disabled — Matches form elements with the `disabled` attribute; `:enabled` matches the active ones.
Related recipes
In the tutorial
- Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.