javascript - Animate custom cursor when hovering on a link

Question

I have a custom image cursor for my body and links.

What I would like to achieve is hovering the link the cursor should transition into the link's cursor image, rather than it just changing straight away.

Currently, I have this code:

html {
  height:100%;
}
body {
  cursor:url(https://i.imgur.com/odlAwsz.png), auto  !important;
  width:100%;
  height:100%;
  background:red;
}

a {
  cursor:url(https://i.imgur.com/yxX4Snm.png), auto !important;
}

<a href="#">I'm a link</a>

Answer 1

Here's a way you can achieve: the following solution allows you to have custom HTML cursors that can transition from one state to an another when hovering specific tags.

1. Let's first create our custom HTML cursor:

   #cursor {
     width: 20px;
     height: 20px;
     position: absolute;
     top: 0;
     left: 0;
     background: blue;
     border-radius: 10px;
   }

   <div id="cursor"></div>