How to Change the Cursor into a Hand Pointer on Hover over list using CSS

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.

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;.

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.