How to Change Cursor to a Hand Pointer on Hover with CSS

John on January 12, 2021

To change the cursor to a hand pointer on hover for any element, use the cursor property inside a CSS selector and set the property value to pointer.

In the example below, when a user hovers over a list item the cursor will change to a hand pointer.

#list {
  cursor: pointer;
}

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Conclusion

If you have elements that need a custom cursor icon on hover use the CSS cursor property to apply one.