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>



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