Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make the cursor to hand when a user hovers over a list item using CSS?
In general, if we hover or take the cursor over an element in HTML document the cursor by default appears as an arrow or a selector if we hover it over a text. But, we can change the behaviour of the cursor on hover to selected elements to any type of available cursor types using the CSS property.
Let us now discuss and understand how you can change the behaviour of the cursor on hover to any particular element using the :hover state and the cursor property of CSS.
Cursor Property
The cursor property in CSS comes with a lot of cursor behaviour types. Generally, it is used with the hover state to show some difference on the cursor behaviour and pull user attraction toward that element. It comes with many options of cursor type, but, in this example, we are only going to talk about the changing of the cursor to hand on hover to a particular element in the list.
There are two types of hand cursor types to which the default cursor can change to −
Grab
Pointer
Let us now understand it in details by practically implementing it inside the JavaScript code example.
Steps
Step 1 − In the first step, we will create a list of different items using any kind of list element of HTML.
Step 2 − In the next step, we will assign a class to all the list (<li>) elements.
Step 3 − In this step, we will grab all of the list items using the class given in the previous step and then use the hover state to change the cursor on hover to those list items.
Example
The below example will explain how you can change the cursor to pointer on hover to the particular list items −
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
.list_container {
padding: 0;
background-color: bisque;
list-style: none;
}
.list_items {
padding: 5px;
border-bottom: 2px solid #444;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class = "container">
<h3> Making the cursor to hand when a user hovers over a list item using CSS </h3>
<h4> List of a few vegatables: </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>
In the above example, we have seen how we can change the type of cursor on hover to the list items. The cursor will change itself to pointer from arrow once you hover over any list item.
Let us now discuss one more code example to implement the and change the behaviour of the cursor to grab on hover to the list items.
The algorithm of this example is same as the algorithm of the previous example you just need to change the cursor type grab from pointer in the hover state CSS of the list items.
Example
The below example will implement and change the behaviour of the cursor to grab as well as pointer from arrow −
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
.list_container {
padding: 0;
background-color: bisque;
list-style: none;
}
.list_items {
padding: 5px;
border-bottom: 2px solid #444;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:nth-child(odd):hover {
cursor: pointer;
}
.list_items:nth-child(even):hover {
cursor: grab;
}
</style>
</head>
<body>
<div class = "container">
<h3> Making the cursor to hand when a user hovers over a list item using CSS </h3>
<h4> List of a few vegatables: </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>
The above example will change the behaviour of the default cursor from arrow to grab and pointer. It will convert the cursor behaviour to type grab when a even list item is hovered and on hover to a odd list item it changes the cursor to pointer.
Conclusion
In this article, we have implemented the two different approaches to change the cursor to hand from arrow with the help of code examples. In the first example, the cursor is changed to pointer from arrow, while, in the next example, it changed to pointer as well as grab on some selected list items.
110 Views
