Add Custom Image to cursor
You can add a cursor to the entire page or you can change the cursor when hover a particular element easily by setting cursor property.
Set the cursor to the body tag if you need to show it everywhere. If not you can use a particular selector like class or id to add a cursor to only that class or id.
Change cursor in entire page
body{
cursor: url('covid.png'),auto;
}
Change cursor when hovering a particular tag
p:hover{
cursor: url('covid.png'),auto;
}
Add custom style using CSS
If you need to add some fancy css stuff to cursor there is no a straight forward way to do that. What you need to do is hide a cursor and add small div and make that div to cursor.
First, Let’s add a div and set an id property as a cursor to that. After setting that, you can add some style to that div. For this, I am going to add a round shape style with some colour and make a middle transparent. Now when you reload the page you can see a small div which we styled.
Next thing you need to do is move this div when we move the mouse cursor. For that, we need to capture the mouse movement. For the capturing part, we need Javascript.
Let’s add that with Javascript. First, you need to register the mouse move listener. This listener will trigger every time when you move the mouse here and there. When move movement occurs, you can access the current position of the movement by X and Y coordinate. What we need to do is get those position values and set the div X and Y position based on that. Now you can see that div get moved properly.
#cursor{
width: 30px;
height: 30px;
background-color:rgba(250, 128, 114, 0.774);
position: absolute;
border-radius: 50%;
border: 2px solid #fa8072;
transform: translate(-50%,-50%);
}
<body>
<div id="cursor" ></div>
</body>
window.addEventListener("mousemove",function(e){
document.getElementById("cursor").style.left = e.pageX;
document.getElementById("cursor").style.top = e.pageY;
})
Fix click not get trigger issue in the custom cursor
When you try to click a link by using this custom cursor, you may have experienced it does not work as expected. But there is a quick and easy solution for that. All you have to do is set the pointer-event property in cursor to none. Now you can see all the stuff working as expected.
#cursor{
width: 30px;
height: 30px;
background-color:rgba(250, 128, 114, 0.774);
position: absolute;
border-radius: 50%;
border: 2px solid #fa8072;
transform: translate(-50%,-50%);
pointer-events: none;
}
if you liked this tutorial, you can support me by buying me a coffee
Top comments (4)
Quick tip, there's no need to have
:hover, the cursor property is already only applied when the mouse is over the element.So this:
Is really the same as this:
Changing the cursor on a webpage is considered bad practice, so I would not recommend implementing this.
Some people would like to create a custom cursor for their website too, the tutorial is for them
Nice!