Need help with element follows the cursor

[axel]

Hello, dear Masters of the Universe,

i hope you can help. I have the following custom js, to make the ".below-image" -class of project-thumbnials follows the cursor: (my working pen: https://codepen.io/pingundpong/pen/abJmxQy)
adapted to lay theme like this:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    
    jQuery(document).on("mousemove", function (e) {
        jQuery(".below-image").css({
            left: e.pageX,
            top: e.pageY
        });
    });
    
});
</script>

and the css:

.below-image {
    display: none;
    width: 420px;
    margin-left: 10px;
    position: absolute;
    font-weight: 700;
    color: #000;
    z-index:80;
}
a:hover .below-image{
    display: block;
}

It looks like the absolute positioning gets ignored.
I also tried with jQuery(element).on() but without success.

do you have any idea how I can solve it?
or is the way i do this just the wrong approach to achieve the goal?

you can check the behaviour with lay theme on my project page:
http://querfeld.pingundpong.de/mousefollow-test/

many thanks for helping!
regards, Axel

[axel]

to answer the question myself (i have noticed that there are a lot of similar questions on this topic here) and maybe to offer a general solution for others who have the same problem, here is a working script:

https://codepen.io/pingundpong/pen/bGqoexy

it might need some performance testing and tweaking, but it fits the needs.

good luck and have fun,
Axel

[Richard]

Dear Axel

@axel

Amazing 💥
Thank you for coming back with a solution for others as well to this thread.

---

Sincerely

Richard