LAST UPDATED: AUGUST 5, 2021
How to Change the Cursor into a Hand Pointer on Hover using CSS?
Answer: Using CSS Cursor Property
When we visit any website, we generally see that when the cursor hovers through the links, it changes to a hand pointer. This is used to indicate to the user that it is clickable links. In this tutorial, we will learn to change the cursor to a hand pointer on hover using CSS.
Changing the Cursor into a Hand Pointer on Hover
We can change the cursor into a hand pointer by simply using the CSS cursor property. Use pointer value to change the cursor to hand pointer.
Example: Change the cursor to hand cursor
In this example, we have added cursor:pointer to the <li> tag to change the cursor to hand pointer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<style>
li {
cursor: pointer;
background: #ff4455;
display: inline-block;
font-size: 25px;
}
</style>
<body>
<h2> change cursor into hand cursor</h2>
<ul class="container">
<li href="#">Home </li>
<li href="#">course </li>
<li href="#">study material</li>
</li>
</body>
</html>
Output:
Here is the output of the above program.
Example: Change the cursor pointer to the default cursor
We can also change the hand cursor to the default cursor using the cursor: default property. The anchor tag uses a pointer cursor. But we have changed it to the default cursor.
Conclusion
So here, we have learned to change the cursor to the hand cursor on hover using CSS. The cursor: pointer property is used to change the cursor to the hand cursor. We can also change the hand cursor to the default cursor.
