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

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.

Related Tutorials

 thumbnail

The HTML <del> Tag

December 30, 2020