Mouse cursor custom, problemi su hover e click

[Gio2011]

Ciao a tutti,

sto smanettando un po in CSS e JS per customizzare il cursore del mouse nella finestra browser.
Praticamento imposto cursor:none sul body e poi creo un elemento html .cursor al quale assegno le coordinate X e Y tramite:

        document.addEventListener('mousemove', e => {
            cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
        })

        document.addEventListener('click', () => {
            cursor.classList.add("cursor_expanded");
            setTimeout(() => {
                cursor.classList.remove("cursor_expanded");
            }, 300)
        })

Per aggiugnere un effetto quando il cursore arriva sopra ad un link, ho implementato la funzione precedente con la funzione isColliding:

    let isColliding = function (div1, div2) {

        let d1Offset = div1.offset();
        let d1Height = div1.outerHeight(true);
        let d1Width = div1.outerWidth(true);
        let d1Top = d1Offset.top + d1Height;
        let d1Left = d1Offset.left + d1Width;

        let d2Offset = div2.offset();
        let d2Height = div2.outerHeight(true);
        let d2Width = div2.outerWidth(true);
        let d2Top = d2Offset.top + d2Height;
        let d2Left = d2Offset.left + d2Width;

        return !(d1Top < d2Offset.top || d1Offset.top > d2Top || d1Left < d2Offset.left || d1Offset.left > d2Left);
    };


        document.addEventListener('mousemove', e => {
            cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
            if (isColliding($('.expand'),$('.cursor'))==true){
                $('.cursor').addClass('cursor_expanded');
            } else {
                $('.cursor').removeClass('cursor_expanded');
            }
        })

        document.addEventListener('click', () => {
            cursor.classList.add("cursor_expanded");
            setTimeout(() => {
                cursor.classList.remove("cursor_expanded");
            }, 300)
        })

il problema è che mi fa l'effetto solo sulla prima .expand del documento, non sulle altre. COME MAI?
Cioè il COME MAI lo capisco: alla funzione viene passata la classe .expand e lui becca la prima. La odmanda giusta è: COME FACCIO a passargli l elemento che si trova sotto il mouse?

[Gio2011]

risolto così:

        const cursor = document.querySelector('.cursor');
        document.addEventListener('mousemove', e => {
            cursor.setAttribute("style", "top: "+(e.pageY)+"px; left: "+(e.pageX)+"px;")
            check_pos(e.pageY,e.pageX);
        })

        function check_pos(y,x) { 
            var va_espanso = false;
            let elements = document.elementsFromPoint(x, y);
            for (var i = 0; i < elements.length; i++) {
                if (i < elements.length - 1) {
                    if (elements[i].className == "expand"){
                        va_espanso = true;                        
                    }
                }
            }
            if (va_espanso){
                $('.cursor').addClass('cursor_expanded');
            } else {
                $('.cursor').removeClass('cursor_expanded');
            }
        }