To change the cursor into a hand when a user hovers over a list item, you can use the ‘cursor’ property in CSS. Here is an example:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
li {
    cursor: pointer;
}

This will change the cursor to a hand for all list items within the unordered list.

Alternatively, you can also use the ‘cursor’ property on the a tag inside the list item if you are using anchor tag to represent the list items.

<ul>
    <li><a href="#">List item 1</a></li>
    <li><a href="#">List item 2</a></li>
    <li><a href="#">List item 3</a></li>
</ul>
a {
    cursor: pointer;
}

This will change the cursor to a hand when hovering over the anchor tag inside the list items.

You can also use the ‘cursor’ property on the li tag if you are making the whole li clickable.

<ul>
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  <li><a href="#">List item 3</a></li>
</ul>
li {
    cursor: pointer;
}

Output:

It will change the cursor to a hand when hovering over the whole li element.

It’s important to note that cursor: pointer is supported by all modern browsers and it’s a widely used value for this kind of scenarios.

Also Read:

Categorized in:

HTML & CSS

Tagged in:

,