Changing the pointer cursor at each page reload

I'm writing some code trying to change a cursor at each reload, using javascript only. I'm using Math.random cause I have 13 different cursors (it's ghibli theme)

It works fine for the default as I'm changing it on the html element

BUT I want all the pointers to change as well. To clarify, on each reload I have a set of two cursor I need to put in : one for the default cursor and one for the hover/pointer cursor

And I can't seem to do it. It looks like the cursor overall doesn't have different states (like if it was a kindof object) but elements have class (like the <a> element) that change the cursor image to, well a pointer.

I can't overwrite the <a> base state.

Here is the code I have rn (I'm a student so it might not be pretty) :

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

SOOOO it seems I'm rather dumb and just replacing

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

By

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

AND ITS LOGIC since we are here focusing on <a> elements being hovered.

Thank you all for your time and hopes this will help future people having the same prob (even tho its simple)