DEV Community

Cover image for Change the cursor on a website with these tips
Abhiraj Bhowmick
Abhiraj Bhowmick

Posted on

Change the cursor on a website with these tips

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;
        }
Enter fullscreen mode Exit fullscreen mode

Change cursor when hovering a particular tag

    p:hover{
            cursor: url('covid.png'),auto;
        }
Enter fullscreen mode Exit fullscreen mode

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%);
        }
Enter fullscreen mode Exit fullscreen mode
    <body>
        <div id="cursor" ></div>
    </body>
Enter fullscreen mode Exit fullscreen mode
   window.addEventListener("mousemove",function(e){
        document.getElementById("cursor").style.left = e.pageX;
        document.getElementById("cursor").style.top = e.pageY;
    })
Enter fullscreen mode Exit fullscreen mode

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;
        }
Enter fullscreen mode Exit fullscreen mode

if you liked this tutorial, you can support me by buying me a coffee

BMC

Top comments (4)

Collapse
 
oskarcodes profile image
Oskar Codes • Edited

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:

p:hover {
  cursor: url('covid.png'), auto;
}
Enter fullscreen mode Exit fullscreen mode

Is really the same as this:

p {
  cursor: url('covid.png'), auto;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
deviouslab profile image
DeviousLab

Changing the cursor on a webpage is considered bad practice, so I would not recommend implementing this.

Collapse
 
abhirajb profile image
Abhiraj Bhowmick

Some people would like to create a custom cursor for their website too, the tutorial is for them

Collapse
 
fradar profile image
FRADAR

Nice!