Проблемы с пользовательским курсором - PullRequest
Новая
       7

Проблемы с пользовательским курсором

0 голосов
/ 30 апреля 2020

Я в настоящее время разрабатываю свой веб-сайт, и я реализовал пользовательский курсор с CSS и JS Но проблема, с которой я сталкиваюсь, заключается в том, что пользовательский курсор является анимированным и анимируется по первой ссылке, но не ' На других ссылках на веб-сайте я даже пытался добавить определенные c классы, то есть напрямую получать их по тегам, но, похоже, это не работает. Если кто-то может помочь, это будет так мило с вашей стороны. 

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

1 Ответ

0 голосов
/ 30 апреля 2020

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