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>
