jQuery mouseover doesn't work as expected on document

I would like to have my own cursor only displayed over certain images with a certain class.

I've already written a few lines for that.

Here is my code:

function registerCursorHoverEffect() {
    if (!isTouch()) {
        const el = document.body;
        var cursorDiv = document.createElement("div");
        cursorDiv.setAttribute("id", "cursor");
        cursorDiv.setAttribute("class", "light-spot light-spot--cursor light-spot--center-center light-spot--color-red light-spot--filled light-spot--outside");
        el.before(cursorDiv);

        document.getElementById("cursor").innerHTML = '';
        var cursorDivAppend = document.createElement("div");
        cursorDivAppend.setAttribute("id", "cursor-append");
        cursorDivAppend.setAttribute("class", "cursor-append");
        el.before(cursorDivAppend);

        // Mousemove
        $(document).on('mousemove', function (event) {
            if($('.col-3:hover').length != 0) {
                const appendScale = 1
                var destinationX = event.pageX;
                var destinationY = event.pageY;
                var transformScale = `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(${appendScale})`
                $('#cursor').css('transform', transformScale);
            }
        })
    }
}

The following screenshot shows what is generated when you hover over an image with a certain class:

The critical part of it all is here:

        // Mousemove
        $(document).on('mousemove', function (event) {
            if($('.col-3:hover').length != 0) {
                const appendScale = 1
                var destinationX = event.pageX;
                var destinationY = event.pageY;
                var transformScale = `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(${appendScale})`
                $('#cursor').css('transform', transformScale);
            }
        })

event.pageX should always give me the current mouse position of the $(document) and not of the event itself. Exactly the same for event.pageY. But I always get the current position of the event and I don't know why.

Can somebody help me please?

UPDATE:

However, the width of the cursor element hinders me because I get the coordinates of the $ (documents). The event is only triggered when I am outside the cursor. Here is a screenshot and to clarify the problem: