How to change the cursor into a hand when a user hovers over a list item?

This tutorial shows you how to change the cursor into hand for the CSS list tag in HTML.

It covers the CSS styles for a hand cursor.

usually, a hand cursor pointer is used for anchor styles, Sometimes, We need to apply for an order and unordered list items.

CSS cursor hand styles for unordered list

Let’s create an ordered list using the <ul> tag in html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

It renders as follows on the page with the default mouse pointer on the hovering item.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

The default behavior is if the user points the item, shows a mouse pointer, and clicks multiple items, It selects the item.

There are below CSS properties, which show the hand cursor.

You can use one of the properties which support all browsers.

To apply to hover an item, You need to add:hover pseudo selector on the list item.

li:hover {
  cursor: pointer;
}

Here is a sass code using the parent selector

li {
  &:hover {
    cursor: pointer;
  }
}

It rendered the unordered list with each item showing the cursor hand during hover it.

<style>
  li:hover {
    cursor: grab;
  }
</style>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Let’s create an order list using the <ol> tag

<ol>
  <li>Switzerland</li>
  <li>USA</li>
  <li>Germany</li>
</ol>

It renders as follows on the page with the default mouse pointer on the hovering item.

<ol>
  <li>Switzerland</li>
  <li>USA</li>
  <li>Germany</li>
</ol>

There are below CSS properties used to show the hand cursor.

: hover pseudo selectors uses to apply hovering styles

li:hover {
  cursor: pointer;
}

Renders

<style>
  li:hover {
    cursor: grab;
  }
</style>
<ol>
  <li>Switzerland</li>
  <li>USA</li>
  <li>Germany</li>
</ol>