Div follow cursor inside of parent

I have this codepen where I’m trying to make the cursor follow my mouse perfectly inside the box, and as I leave the parent slide, it should stop at the edge and disappear. But when I try to grab coordinates, it gets really buggy? Is there a better way to do this?

I’ve narrowed down the issue NOT being slick (thinking the wide slick container was skewing something)…
I’ve also learned (maybe obvious to others) that the getCoords function is returning 0 / 1 sometimes for x/y and that’s the flickering. But I’m not seeing (yet) the reason for that. I’ve console logged the beginning x/y variables inside getXYpos function and they seem to be what’s returning 0 / 1…but it doesn’t make sense to me why :slight_smile: .

x = elm.offsetLeft;
            y = elm.offsetTop;

To take a step back;
Why are you wrapping your variable declaration in a timeout that will reset the value of movingDiv after 5 seconds?

Leftovers from various debugging stuff. It will not remain in the final product. I was trying to make sure other stuff (not shown in this demo) wasn’t affecting it.

Hi there RyanReese,

you may find this link…


…has some useful insights about offsetTop and offsetLeft. :winky:


1 Like

Another update…it seems when I remove the transform from .cursor…it seems to stop the flickering. But anytime

Hi :slight_smile: so as I was about to look at this…I made progress. https://codepen.io/ryanreese09/pen/zYYJvVe

I was having issue getting the circle centered on the center of the cursor so I moved the transform to a child element. Now I need to prevent my mousemove event from screwing up when children are hovered on (noticeable in the codepen)

Took a while but I got there in the end! https://codepen.io/ryanreese09/pen/zYYJvVe


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.