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

06 Dec, 2018
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:
<!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;.
<!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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property