In CSS, various types of cursors are used for different HTML elements, and to change the type of cursor, the “cursor” property is used. It permits you to change the cursor type and set the value of the cursor you want to display on the screen. As an additional feature, it also lets you set your own cursor image.
In this guide, you will learn:
- What is cursor CSS property
- How to change cursor to image on Hover using CSS
So, let’s start!
What is “cursor” CSS Property?
To control the appearance of the mouse over an HTML element, the “cursor” property of CSS can be used. It allows changing the regular cursor into different types such as copy cursor, hand pointer, grab, and many more. You can also set your own custom cursor by setting the url of the image in the cursor property.
Syntax
The syntax of the cursor property is given as:
In the above-given syntax, assign the path of the image in the “url()” that you want to display on the screen.
We will now move to the example to change the regular cursor into an image on hover.
How to Change Cursor to Image on Hover Using CSS?
To change the cursor to an image on hover, first, add an element in HTML.
Example 1: Changing Cursor to an Image on Hover using cursor Property
We will create a heading <h1> and button class name “btn”.
HTML
<h1> Change Cursor to Image on Hover</h1>
<button class="btn">Click Me</button>
</body>
Currently, hovering on the button will show the default cursor:
Now move to the CSS and change the cursor to the image.
Then, set the path of the image in the “url()”. For instance, we have specified “icon.svg” as our selected image. Then, set the value of the cursor property as “auto”.
CSS
cursor: url(icon.svg), auto;
padding: 10px;
}
Save the above code and execute the HTML file to see the following outcome:
The given output indicates that the cursor is successfully changed into an image on hover.
Note: “auto” is used as an alternative option in the cursor property; when the image does not load, or the file path or file itself is missing, the default icon is displayed on the screen because of the auto value.
Example 2: Setting Default Cursor on Hover
For instance, we will give the url of the image and only set the value of the cursor property as “auto”:
As a result, the cursor will not change when hovered over the button:
Example 3: Setting Image Alternative on Hover
In the place of auto, you can set different values of the cursor you want to display as an alternative to the image. For example, we will change the value of the cursor property from “auto” to “pointer”:
As you can see in the below output, the cursor is changed into a hand pointer when it hovers over the button:
We have provided the easiest method for changing the cursor image on hover using CSS.
Conclusion
In CSS, you can change the cursor to the image on hover using the “cursor” property. It allows changing a regular cursor to an image by assigning the “url” of the image to the cursor property. You can apply any type of cursor you want to display when it has hovered on an element. This article demonstrated the method of changing the cursor to a hand pointer.
