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 | ![]() |
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>
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.