cursor

Published Mar 30, 2022Updated Oct 27, 2023
Contribute to Docs

The cursor property sets the appearance of the mouse cursor when hovering over an element. The appearance can be set by specifying the type of cursor, or by loading a specific icon. When using an icon, fallback images can be used, ending with a mandatory keyword fallback.

Syntax

The cursor property can be set a specific keyword value:

cursor: keyword;

It can also accept one or more URLs:

cursor: url(cursor_image), url(fallback_cursor_image), keyword;

If the primary cursor_image fails to load, an optional fallback_cursor_image can be applied instead. However, in case all the image URLs fail to load, the mandatory keyword will be used as a last resort.

These are some common keywords used to specify the type of cursor to display:

Keyword Example Cursor Description
auto Determines the cursor to display based on context.
none No cursor is displayed.
default Default Cursor The default system cursor, usually an arrow.
context-menu Context Menu Cursor Indicates a context menu is available.
help Help Cursor Indicates help information is available.
pointer Pointer Cursor Indicates a link.
progress Progress Cursor System is busy in the background but interaction is allowed.
wait Wait Cursor System is busy and interaction is not allowed.
cell Cell Cursor Indicates a table cell or cells can be selected.
crosshair Crosshair Cursor Used to mark selections in an image.
text Text Cursor Used to indicate editable text.
vertical-text Vertical Text Cursor Used to indicate editable vertical text.

Example

In the example below, a pointer hand will appear whenever the cursor hovers over the paragraph:

<p style="cursor: pointer;">The cursor is pointing at this paragraph!</p>

cursor-example

All contributors

Looking to contribute?

Learn CSS on Codecademy