{

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.

  • ordered list
  • unordered list

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 a ordered list using <ul> tag in html

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

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

  • One
  • Two
  • Three
  • Four

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

There are below css properties, shows the hand cursor.

  • cursor:pointer
  • cursor:grab
  • cursor:hand

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 parent selector

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

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

  • One
  • Two
  • Three
  • Four

CSS hand cursor pointer for order list

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

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

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

  1. Switzerland
  2. USA
  3. Germany

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

  • cursor:pointer
  • cursor:grab
  • cursor:hand

: hover pseudo selectors uses to apply hovering styles

li:hover { cursor: pointer; }

Renders

  1. Switzerland
  2. USA
  3. Germany

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.