I am working with Vue SFC and Composition API and my goal is to have a shiny-on-hover effect that follows the mouse when it hovers a specific div on the page.
I added a @mousemove directive on this div. Events are triggered when the mouse hovers the div (which is the expected behaviour) but my issue is that events continue to be triggered even after the mouse left the div
Here is the Vue SFC playground where I reproduced the issue and added more details.
Oh, that's a fun one: You are drawing the blue dot in a CSS :after of the container, and put it right under the cursor. However, it does still belong to the container. So basically a part of the container gets stuck to the cursor, so it is still hovering a child of the container, even outside it, and the mousemove event keeps firing.
When I move the mouse fast enough, I can escape the blue dot and the events stop. Similarly, I can pick it up again.
An easy fix (as suggested by @tao in the comments), is to stop the :after element from receiving pointer events:
.ctn:after{
pointer-events: none;
...
}