How to Change the Cursor into a Hand Pointer on Hover over list using CSS (original) (raw)

Last Updated : 15 Jun, 2024

**CSS offers a powerful property called "**cursor" that controls the appearance of the mouse pointer when hovering over specific HTML elements. By assigning different values to this property, you can customize the cursor's behaviour. In our case, we'll be using the value "pointer" to trigger the classic **hand icons. This slight visual cue plays a significant role in user experience (UX) by indicating clickable list elements and improving navigation clarity.

**Syntax:

element:hover {
cursor:grab/pointer;
}

Basics of Cursor Styles

To make the cursor change to a hand icon when a user hovers over a list item, we’ll use the cursor property. Specifically, we’ll apply cursor: pointer; to the list item’s hover state.

Example 1: Basic Implementation

In this example, we sets the cursor to "grab" when hovering over list items. It contains the heading "GeeksforGeeks", a "Computer Science Subject Lists" section, and an unordered list of subjects.

html `

make cursor to hand

GeeksforGeeks

<div class="sub">
    Computer Science Subject Lists:
</div>

<ul>
    <li>Data Structure</li>
    <li>Algorithm</li>
    <li>Operating System</li>
    <li>Computer Networks</li>
    <li>C Programming</li>
    <li>Java</li>
    <li>DBMS</li>
</ul>

`

**Output:

cursor-to-hand-when-a-user-hovers-over-a-list-item

cursor to hand when a user hovers over a list item Example Output

Example 2: Alternating Cursor Styles

For more visual variety, we can alternate cursor styles using the nth-child pseudo-class. This example contains CSS property to change cursor pointer alternate. In this example, use nth-child(2n+1) as cursor:grab; and use nth-child(2n+2) as cursor:pointer;.

html `

make cursor to hand

GeeksforGeeks

<div class="sub">
    Computer Science Subject Lists:
</div>

<ul>
    <li>Data Structure</li>
    <li>Algorithm</li>
    <li>Operating System</li>
    <li>Computer Networks</li>
    <li>C Programming</li>
    <li>Java</li>
    <li>DBMS</li>
</ul>

`

**Output:

cursor-to-hand-when-a-user-hovers-over-a-list-item-3

cursor to hand when a user hovers over a list item Example Output

In this example, odd-indexed list items have a “grab” cursor, while even-indexed items have the default “pointer” cursor.

**Additional Cursor Customization

While "pointer" is the most common value for clickable elements, CSS offers a variety of cursor options to enhance your design: