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.
<!DOCTYPE html>
<html>
<head>
<title>make cursor to hand</title>
<style>
body {
width:70%;
}
h1 {
color:green;
}
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: 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;.
<!DOCTYPE html>
<html>
<head>
<title>make cursor to hand</title>
<style>
body {
width:60%;
}
h1 {
color:green;
}
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:
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:
- "default": The standard text selection cursor.
- "help": Displays a question mark, often used for help elements.
- "move": A four-headed arrow indicating movable elements.
- "text": A vertical I-beam for text input areas.