cursor
In CSS, 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 the last resort.
Common Keywords
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 1: Pointer Cursor
In this example, a pointer
cursor will appear whenever the cursor hovers over the target paragraph.
Here is the HTML code:
<p class="pg">The cursor is pointing at this paragraph!</p>
Here is the CSS code:
.pg {cursor: pointer;}
The output will be:
Example 2: Help Cursor
In this example, a help
cursor will appear whenever the cursor hovers over the target paragraph.
Here is the HTML code:
<p class="pg">The cursor is pointing at this paragraph!</p>
Here is the CSS code:
.pg {cursor: help;}
The output will be:
Example 3: Not-Allowed Cursor
In this example, a not-allowed
cursor will appear whenever the cursor hovers over the target paragraph.
Here is the HTML code:
<p class="pg">The cursor is pointing at this paragraph!</p>
Here is the CSS code:
.pg {cursor: not-allowed;}
The output will be:
Frequently Asked Questions
1. Can I use animated cursors in CSS?
Yes, but browser support is limited for these types of cursors. You can use .ani
files in Internet Explorer. Modern browsers typically support .cur
and .png
.
2. Does the cursor
property affect touch devices?
No. Touch devices don’t use cursors, so this property has no visible effect on mobile interfaces.
3. Can I chain multiple custom cursors?
You can specify multiple url()
cursors with fallbacks. The browser uses the first one it can load successfully.
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.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours