How to Change Cursor to a Hand Pointer in CSS

1. Using the cursor Property to Change the Mouse Pointer to a Hand Pointer in CSS
2. Using the url() Function in the cursor Property to Change the Mouse Pointer to a Custom Hand Pointer in CSS

This article will introduce methods to change the mouse pointer to a hand pointer while moving the mouse to list items in CSS.

Using the cursor Property to Change the Mouse Pointer to a Hand Pointer in CSS

We can change how the mouse pointer displays when pointing over a specific element using the CSS cursor property.

For example, we can use the property to change the mouse pointer to a hand pointer by setting the value of the cursor property to pointer. We can select the specific element in CSS and apply this property.

The cursor property has a large number of options. Some options are help, wait, crosshair, not-allowed, zoom-in, etc.

For example, create some list items using the ul and li tags in HTML, select the li tag in CSS, and set the cursor property to pointer. As we move the mouse pointer to the list items, the mouse pointer will change to a pointing hand.

In this way, we can change the mouse pointer to the hand pointer in CSS.

Example Code:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: pointer;
}

Using the url() Function in the cursor Property to Change the Mouse Pointer to a Custom Hand Pointer in CSS

We can also add a custom hand pointer using the url() function in CSS’s cursor property.

We should specify the image’s URL in the url() function. We can specify multiple URLs as a fallback so that if one does not work, the other might work.

The multiple url() functions are separated by a comma. When the mouse pointer is moved into a specific element, the custom pointer will be displayed.

We can set the URL of the custom hand pointer in the function to change the mouse pointer to the hand pointer in CSS.

For example, use the same list as in the first method for the demonstration. In CSS, select the li tag, write the cursor property, and set the cursor property to url() function where the URL https://img.icons8.com/nolan/32/hand-cursor.png is the parameter. Next, write auto after a comma as a fallback.

Thus, we can use the url() function to create a custom hand pointer and show it while hovering over a list in CSS.

Example Code:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: url("https://img.icons8.com/nolan/32/hand-cursor.png"), auto;
}