Open In App
Related Articles

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

Improve Article
Improve
Save Article
Save
Like Article
Like

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
Similar Reads
Related Tutorials