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>