loading...
Cover image for Change the cursor using CSS and Javascript to give a unique feeling to the website

Change the cursor using CSS and Javascript to give a unique feeling to the website

mightytechno profile image Mighty ・2 min read

Add Custom Image to the 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 of the 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;
        }

Originally published at mightytechno

Connect with me - Instagram |Blog |Twitter

Posted on by:

mightytechno profile

Mighty

@mightytechno

Just an another Developer 😊

Discussion

pic
Editor guide