Open In App
Related Articles

How to make the cursor to hand when a user hovers over a list item using CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Use CSS property to create cursor to hand when user hovers over the list of items. First create list of items using HTML <ul> and <li> tag and then use CSS property :hover to cursor:grab; to make cursor to hand hover the list of items.

Syntax:

element:hover {
cursor:grab/pointer;
}

Example 1:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>make cursor to hand</title>
    <style>
        body {
            width:70%;   
        }
        h1 {
            color:green;
            text-align:center;
        }
        li:hover{
            cursor:grab;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <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>
</body>
 
</html>

                    

Output:

Example 2: 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

<!DOCTYPE html>
<html>
 
<head>
    <title>make cursor to hand</title>
    <style>
        body {
            width:60%;   
        }
        h1 {
            color:green;
            text-align:center;
        }
        li {
            font-size:20px;
        }
        li:nth-child(2n+1) {
            background: green;
            cursor:grab;
            width:50%;
            padding:5px;
        }
        li:nth-child(2n+2) {
            background: #CCC;
            cursor:pointer;
            width:50%;
            padding:5px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <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>
</body>
 
</html>

                    

Output:



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads