CSS cursor Property

The cursor property specifies the type of mouse pointer to show when the mouse hovers over an element.

selector { cursor: value; }

auto	The browser determines the cursor based on the context of the element.
default	Displays the platform-dependent default cursor, usually an arrow.
none	No cursor is rendered at all over the element.
context-menu	Indicates that a context menu is available under the pointer.
help	Indicates that help information is available, often shown as a question mark.
pointer	The cursor is a pointer that indicates a link, typically a hand icon.
progress	Indicates the program is busy in the background but the user can still interact.
wait	Indicates the program is busy and the user should wait before interacting.
cell	Indicates that a cell or set of cells may be selected.
crosshair	A simple crosshair cursor used for precise selection or drawing.
text	Indicates text that can be selected, usually an I-beam shape.
vertical-text	Indicates vertical text that can be selected.
alias	Indicates an alias or shortcut is to be created.
copy	Indicates that the item will be copied when dropped.
move	Indicates that the item will be moved when dropped.
no-drop	Indicates that the item cannot be dropped at the current location.
not-allowed	Indicates that the requested action will not be performed.
grab	Indicates that an element can be grabbed or dragged.
grabbing	Indicates that an element is currently being grabbed or dragged.
all-scroll	Indicates that the content can be scrolled in any direction.
col-resize	Indicates that a column can be resized horizontally.
row-resize	Indicates that a row can be resized vertically.
n-resize	Bidirectional resize cursor for the north edge.
e-resize	Bidirectional resize cursor for the east edge.
s-resize	Bidirectional resize cursor for the south edge.
w-resize	Bidirectional resize cursor for the west edge.
ne-resize	Bidirectional resize cursor for the north-east edge.
nw-resize	Bidirectional resize cursor for the north-west edge.
se-resize	Bidirectional resize cursor for the south-east edge.
sw-resize	Bidirectional resize cursor for the south-west edge.
ew-resize	Indicates a bidirectional horizontal resize cursor.
ns-resize	Indicates a bidirectional vertical resize cursor.
nesw-resize	Indicates a bidirectional diagonal resize from top-right to bottom-left.
nwse-resize	Indicates a bidirectional diagonal resize from top-left to bottom-right.
zoom-in	Indicates that an element or area can be zoomed in.
zoom-out	Indicates that an element or area can be zoomed out.
<url>	Defines a custom image to be used as the cursor via the url function.

Code Examples

A basic example showing how to trigger the help cursor when a user hovers over a specific container.

<div style="cursor: help; border: 2px solid #333333; padding: 20px; width: 200px;">Hover for help info</div>

An advanced implementation using JavaScript to toggle between grab and grabbing states during user interaction.

<div id="actionBox" style="width: 300px; height: 150px; background: #eeeeee; border: 1px solid #cccccc; display: flex; align-items: center; justify-content: center; transition: background 0.3s;">Hold mouse to grab</div>
<script>
const box = document.getElementById("actionBox");
box.style.cursor = "grab";
box.onmousedown = () => {
    box.style.cursor = "grabbing";
    box.style.background = "#dddddd";
};
box.onmouseup = () => {
    box.style.cursor = "grab";
    box.style.background = "#eeeeee";
};
</script>

Pro Tip

If you are building a custom branded interface or a game-like web app, you can use "cursor: none" to hide the system pointer and then use JavaScript to move a custom HTML element that tracks the mouse coordinates. This gives you total creative control over the pointer's design and animations.

Deep Dive

Think of the cursor as a chameleon for your mouse. It is a visual cue that changes shape to signal to the user what they can do with a specific element. When the mouse enters an element's hit-area, the browser communicates with the operating system to swap the standard pointer bitmap for the one specified in your CSS. You can stack multiple values like a font-stack, including custom images using "url()". If the first image fails, the browser moves to the next one in the list until it finds a supported format or a generic keyword.

Best Practices

Stick to standard conventions so you do not confuse your users. Use "pointer" for clickable links or buttons and "text" for readable content. If you use a custom image, keep it small, ideally 32x32 pixels, and always provide a standard keyword fallback at the end of your value list. This ensures the user always has a pointer even if the custom image fails to load.

Common Pitfalls

Avoid using "cursor: pointer" on elements that are not actually interactive, as this baits users into clicking things that do nothing. Remember that touch-based devices do not have a cursor, so your visual cues will be lost on mobile users. Also, custom cursor images larger than 32x32 pixels are often ignored by modern browsers to prevent UI obstruction.

Accessibility

Do not rely on cursor changes as the only way to convey meaning. Users navigating with a keyboard or screen reader will not see the cursor change. Always supplement cursor changes with other visual and structural cues like "aria-label" attributes, focus states, and color changes to ensure every user understands the interface.

Dev Data Table: cursor property

default	auto
animatable	no
inherited	yes
experimental	no
year_intro	1998
year_standard	1998
js_syntax_1	element.style.cursor = "pointer";
js_syntax_2	element.style.setProperty("cursor", "crosshair");
js_note	When using JavaScript to change the cursor, ensure you revert it back to "auto" or "default" once the specific interaction is finished.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1.2, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }