CSS 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>

Copy to clipboard
Copy to clipboard

Here is the CSS code:

.pg {
  cursor: pointer;
}

Copy to clipboard
Copy to clipboard

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>

Copy to clipboard
Copy to clipboard

Here is the CSS code:

.pg {
  cursor: help;
}

Copy to clipboard
Copy to clipboard

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>

Copy to clipboard
Copy to clipboard

Here is the CSS code:

.pg {
  cursor: not-allowed;
}

Copy to clipboard
Copy to clipboard

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.