How to Change Cursor to a Hand Pointer in CSS

There are many types of cursors that are used on different screens. You can change the type of cursor by using the CSS cursor property, which specifies what type of cursor to display for the user, for example, hand pointer, grab, copy, etc. We can modify a regular cursor into a hand pointer by giving the ‘pointer’ value to the cursor property.

In this article, we will learn:

“cursor” property
Syntax of cursor property
How to change the cursor to a hand-pointer in CSS?

Let’s get started!

“Cursor” CSS Property

CSS “cursor” properties control the appearance of the mouse pointer when it is over an element. The cursor property in CSS allows us to change a regular cursor to a hand cursor, copy cursor, cell cursor, grab cursor, etc. Each cursor shape serves different purposes. For example, the copy cursor indicates copying the text, and the hand-pointer indicates clicking on links or menus. Now we move to the syntax of the cursor property.

Syntax of cursor Property

The syntax of the cursor property is:

cursor: value;

In the place of ‘value’, we can assign the value of the cursor which we want to display on the screen. For example, pointer, copy, grab, and many more.

After understanding the syntax of the cursor, we will move to the example in which we modify the regular cursor into a hand pointer.

How to Change Cursor to a Hand Pointer in CSS?

Let’s consider a practical example to illustrate the working of the cursor property.

Example

In this example, we will create a list in HTML file which contain three items:

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JAVASCRIPT</li>

</ul>

Currently, our cursor looks like this:

After that, we will move to the CSS file and set the cursor value to a “pointer” to change cursor type to hand pointer. Moreover, we will set the margin of the list as “25px” and the margin-left as “500px” This is because it will create space between list items and also from the left side of the list:

li{

cursor: pointer;

margin: 25px;

margin-left: 500px;

}

We’ve set the cursor value to “pointer“, which will change to a hand pointer when the user will hover over a list item.

After the implementation of the CSS code, go to the HTML and see the result:

Here, we can see that whenever the cursor moves to the list item, it changes to a hand pointer. This is because of the “cursor” property

Conclusion

The cursor property in CSS allows changing a regular cursor to a hand pointer. To modify the regular cursor to a hand pointer, you have to assign the “pointer” value to the cursor property. You can apply any type of cursor you want to display on the screen. This article demonstrates the method of changing the cursor to a hand pointer.