Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to make the cursor to hand when a user hovers over a list item using CSS?
The CSS cursor property allows you to change the appearance of the mouse cursor when hovering over HTML elements. This is especially useful for list items to indicate they are interactive or clickable.
Syntax
selector:hover {
cursor: value;
}
Possible Values
| Value | Description |
|---|---|
pointer |
A pointing hand cursor, typically used for clickable elements |
grab |
An open hand cursor, indicating something can be grabbed |
grabbing |
A closed hand cursor, indicating something is being dragged |
default |
The default arrow cursor |
Example 1: Pointer Cursor on Hover
The following example changes the cursor to a pointer when hovering over list items
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f0f8ff;
padding: 20px;
}
.list_container {
padding: 0;
background-color: #ffe4b5;
list-style: none;
margin: 0;
border-radius: 8px;
overflow: hidden;
}
.list_items {
padding: 12px 20px;
border-bottom: 2px solid #444;
transition: background-color 0.3s ease;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:hover {
cursor: pointer;
background-color: #ffd700;
}
</style>
</head>
<body>
<div class="container">
<h3>Making the cursor to hand when hovering over list items</h3>
<h4>List of vegetables:</h4>
<ul class="list_container">
<li class="list_items">Potato</li>
<li class="list_items">Tomato</li>
<li class="list_items">Onion</li>
<li class="list_items">Cabbage</li>
<li class="list_items">Lady Finger</li>
</ul>
</div>
</body>
</html>
A centered list with a light blue background appears. When you hover over any list item, the cursor changes to a pointing hand and the background becomes golden yellow.
Example 2: Different Cursors for Odd and Even Items
This example demonstrates using different cursor types for alternating list items
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f0f8ff;
padding: 20px;
}
.list_container {
padding: 0;
background-color: #ffe4b5;
list-style: none;
margin: 0;
border-radius: 8px;
overflow: hidden;
}
.list_items {
padding: 12px 20px;
border-bottom: 2px solid #444;
transition: background-color 0.3s ease;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:nth-child(odd):hover {
cursor: pointer;
background-color: #98fb98;
}
.list_items:nth-child(even):hover {
cursor: grab;
background-color: #ffa07a;
}
</style>
</head>
<body>
<div class="container">
<h3>Different cursor types for odd and even items</h3>
<h4>List of vegetables:</h4>
<ul class="list_container">
<li class="list_items">Potato (pointer)</li>
<li class="list_items">Tomato (grab)</li>
<li class="list_items">Onion (pointer)</li>
<li class="list_items">Cabbage (grab)</li>
<li class="list_items">Lady Finger (pointer)</li>
</ul>
</div>
</body>
</html>
A list appears where odd-numbered items show a pointer cursor and light green background on hover, while even-numbered items show a grab cursor and light orange background on hover.
Conclusion
The cursor property with :hover pseudo-class effectively changes mouse cursor appearance on list items. Use pointer for clickable elements and grab for draggable items to improve user experience.
Updated on: 2026-03-15T17:27:34+05:30
337 Views
Advertisements