在每次页面重新加载时更改指针光标

Question

我正在编写一些代码，尝试仅使用 JavaScript 在每次重新加载时更改光标。 我使用 Math.random 因为我有 13 个不同的光标（它是 ghibli 主题）

它在默认情况下工作得很好，因为我在 html 元素上更改了它

但是我也希望所有的指针都改变。 为了澄清，每次重新加载时，我需要放入一组两个光标：一个用于默认光标，一个用于悬停/指针光标

我似乎做不到。 看起来光标总体上没有不同的状态（就像它是一种对象一样），但元素具有将光标图像更改为指针的类（例如

<a>

元素）。

我无法覆盖

<a>

基本状态。

这是我的代码（我是学生，所以可能不太漂亮）：

let cursor = Math.floor(Math.random() * 13);
console.log(cursor);

const urlDefault = `url('cursors/Click${cursor}.svg')`;
const urlGrab = `url('cursors/Grab${cursor}.svg')`;


document.querySelector("html").style.cursor = urlDefault + ", default";




let liens = document.querySelectorAll("a");
let i = 0

while (i<liens.length) {
    liens[i].addEventListener('mouseover', () => { document.querySelector("html").style.cursor = urlGrab + ", pointer"; })  
    liens[i].addEventListener('mouseleave', () => { document.querySelector("html").style.cursor = urlDefault + ", default"; }) 
    i++;
}

Answer 1

您需要更新事件侦听器内的光标变量。具体方法如下：

let liens = document.querySelectorAll("a");
for (let i = 0; i < liens.length; i++) {
    liens[i].addEventListener('mouseover', () => {
        let cursor = Math.floor(Math.random() * 13);
        const urlGrab = `url('cursors/Grab${cursor}.svg')`;
        document.querySelector("html").style.cursor = urlGrab + ", pointer";
    });
    liens[i].addEventListener('mouseleave', () => {
        let cursor = Math.floor(Math.random() * 13);
        const urlDefault = `url('cursors/Click${cursor}.svg')`;
        document.querySelector("html").style.cursor = urlDefault + ", default";
    });
}

Answer 2

SOOOO，看来我很愚蠢，只是更换

while (i<liens.length) {
    liens[i].addEventListener('mouseover', () => { document.querySelector("html").style.cursor = urlGrab + ", pointer"; })  
    liens[i].addEventListener('mouseleave', () => { document.querySelector("html").style.cursor = urlDefault + ", default"; }) 
    i++;
}

由

while (i < liens.length) {
    liens[i].style.cursor = urlGrab + ", pointer";
    i++;
}

及其逻辑，因为我们在这里专注于悬停的

<a>

元素。

感谢大家的宝贵时间，希望这能帮助未来有同样问题的人（尽管很简单）