Tracking cursor position over window rather than individual elements
I've been playing with an effect where a partially masked element positioned over the mouse adds filters in a glowy blob over a background grid of dots. See the codepen at https://codepen.io/Beanie127/full/RwmKvmz.
The problem I'm having is that when the cursor is over any element other than the div in the background, the circle positions relative to the cursor's offset over the element that the mouse is over, rather than relative to the whole viewport.
I've tried creating a new contentless element that sits at the top of the z-index and tracking the cursor's position on that element, but then the cursor can't interact with any elements underneath, so it's degrading UX.
I've also tried putting the event listener that's tracking the cursor position on the window, or on the document, rather than on a particular element, but that doesn't seem to change anything.
1 Reply
Update: Solved, I was listening to offsetX instead of clientX