自定义光标问题

Question

我目前正在开发我的网站，我已经使用 CSS 和 JS 实现了自定义光标但是我面临的问题是自定义光标是动画的并且它在第一个 link 但在网站上的其他 links 上没有我什至尝试添加特定的类，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 仅 selects 单个节点（匹配 selector 的第一个节点）。

如果您想要 select 所有匹配 select 或

的元素，请使用 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");
    });
})

自定义光标问题

Custom Cursor Issues

html

javascript

css

custom-cursor