javascript - 自定义光标的交错移动和另一个问题

Question

我为我的网站实现了一个自定义光标，但我想为更大的光标添加延迟。因此我为其添加了一个transition属性，但它看起来非常交错。

另外，我有一个悬停动画，似乎无法正常工作。当我刷新我的页面并将鼠标悬停在链接上时，第一次它什么也不做，但第二次我将鼠标悬停在它上面时，动画会起作用。

这是CSS代码：

.cursor{
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1000;
  pointer-events: none;
  transition: all 0.5s ease; 
  transition-property: width, height;
  transform-origin: 100% 100%;
}

.cursor2{
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1000;
  pointer-events: none;
  transition: all 1ms linear; 
  transition-property: width, height;
  transform-origin: 100% 100%;
}

这是JS：

let hover = document.querySelectorAll(".project-link");
let mouseCursor = document.querySelector(".cursor");
let mouseCursor2 = document.querySelector(".cursor2");

hover.forEach(el => {
    $(el).hover(function() {
            el.addEventListener("mouseover", function(){
                mouseCursor.classList.add("hover"),
                mouseCursor2.classList.add("hide");
            });
            el.addEventListener("mouseleave", function(){
                mouseCursor.classList.remove("hover"),
                mouseCursor2.classList.remove("hide");
            });
        });
    })

window.addEventListener("mousemove", cursor);

function cursor(e){
   mouseCursor.style.top = e.pageY + "px",
   mouseCursor.style.left = e.pageX + "px";
   mouseCursor2.style.top = e.pageY  + "px",
   mouseCursor2.style.left = e.pageX  + "px";
}

这是我必须制作自定义光标的 CSS 和 JS 代码。这就是我所拥有的，但似乎 Stack Overflow 让我写得更多，所以让我进一步解释一下。

因此，当我在刷新页面后将鼠标悬停在链接上时，光标不会动画。基本上，它不会添加所需的类，但如果我第二次将鼠标悬停在它上面而不是在同一时间刷新动画作品，它会将所需的类添加到光标 div。

标签： javascripthtmlcssweb