Search code examples
javascriptmouseenter

Javascript mouseenter event only fires if cursor is moving fast enough

I'm creating a custom cursor "trailer" (see fiddle: https://jsfiddle.net/alexdlf/hx6yzu4w/)

Normally, the circle (.cursor) should trail the cursor. While hovering the red box (.cl), the circle should move and stick to the tiny blue point (.ct) within the red box. This is triggered by a mouseenter listener. However, if the cursor is moved into the red box too slowly, it seems the event is not firing and the effect is not taking place (it works fine if the cursor enters the red box at a normal/faster speed).

Is there something wrong with my implementation? Or is there something fundamental about mouseenter that I'm missing?

Solution

  • The "cursor" is covering the red box. Having a transparent background doesn't prevent this. It "works" if you move your mouse faster than the "cursor" can keep up.

    Add pointer-events: none to the CSS of the "cursor".