cursor

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>

All contributors

Looking to contribute?

Learn CSS on Codecademy