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		The default system cursor, usually an arrow.
context-menu		Indicates a context menu is available.
help		Indicates help information is available.
pointer		Indicates a link.
progress		System is busy in the background but interaction is allowed.
wait		System is busy and interaction is not allowed.
cell		Indicates a table cell or cells can be selected.
crosshair		Used to mark selections in an image.
text		Used to indicate editable text.
vertical-text		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>