Mouse move over element not working properly

Hello, I’m trying to set up a mouse move over element interaction, I will post a gif below so I can explain what happens afterwards:

So I set a border on the edges of the div so you can see its limit. The problem is: the interaction is not ending when I move the mouse out of the div, only way after it. Does anyone know why this happens and how to fix this?

Live Preview:
https://test-f812d5.webflow.io/

Preview in the Webflow designer:
https://preview.webflow.com/preview/test-f812d5?utm_medium=preview_link&utm_source=designer&utm_content=test-f812d5&preview=f2011a80792be7d0a5e4501b0c15db64&mode=preview

Much appreciated, thanks!

PS: I know this composition differs from how you build a custom cursor which you use a position fixed div and everything, this one I know how to do it. My build is different, I’m also using % instead of vw, to make the interaction work based on the div size.

Because you hover over the “emoji-hover” element which is inside your “container” and this will ad this gap…

So you have to set your hover target only at the emoji

or

Set the Overflow on the container to “hidden”…

See Video here for better understanding

1 Like

Thanks for the explanation @Matzinger got it.

The thing is, if I target the hover at the emoji, I don’t have a way to move it left and right properly. At least I did not find the “right” way to do it. Do you know how to set it up properly? I changed the animation on the emoji instead of the wrapper in the designer, if you can check it.

The second solution works almost perfectly though with overlow: hidden, if anything, I will use the second option, in case there is no better way to do this. Thanks for your time.

Yeah i know what you mean… I would go for the second solution and maybe set the smoothing at the animation to 0… so you dont see it sliding from the “Resting state” to your mouse position…

1 Like

All right sounds good @Matzinger, much appreciated :slight_smile:

1 Like