javascript - 自定义光标问题

Question

我目前正在开发我的网站，并且我已经使用 CSS 和 JS 实现了自定义光标但我面临的问题是自定义光标是动画的，它在第一个链接上确实动画，但在其他链接上没有网站我什至尝试添加特定的类，ID，直接通过它们的标签获取它们，但它似乎不起作用如果有人能提供帮助，那你就太好了。

let mouseCursor = document.querySelector(".cursor");
let mouseCursor2 = document.querySelector(".cursor2");
let hover = document.querySelector("a");

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";
}


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

Answer 1

document.querySelector只选择单个节点（匹配选择器的第一个节点）。

document.querySelectorAll如果要选择与选择器匹配的所有元素，请使用。

let mouseCursor = document.querySelector(".cursor");
let mouseCursor2 = document.querySelector(".cursor2");
let hover = document.querySelectorAll("a");

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";
}


hover.forEach(el => {

    el.addEventListener("mouseleave", function(){
        mouseCursor.classList.remove("hover"),
        mouseCursor2.classList.remove("hide");
    });

    el.addEventListener("mouseover", function(){
        mouseCursor.classList.add("hover"),
        mouseCursor2.classList.add("hide");
    });
})