Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
949 views
in Technique[技术] by (71.8m points)

javascript - Animate custom cursor when hovering on a link

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...