manipulate cursor position from an element

Question

I have a very wide question here, and I hope I can clearly explain what exactly I need.

The image below shows a circle, which is a html element. I wanted to create an interactive element and play with the cursor. Imagine that for some reason, you can't put your cursor inside the circle. I don't want to just hide the cursor if you approach the circle, but manipulate the cursor in a way that moves your cursor away in a sort of magnetic attraction.

So: If you put your cursor around the circle, it will never approach it and be sent away from this element. is that somehow possible to do? Javascript, Angular or something else? Does anyway have ever created something like that?

Answer 1

you can use following method Hide cursor permanently and use div element instead. On window mouse move event change position of that div element with current location of pointer. Now You need to put condition here that when ever pointer enters in circle region do not update div element position with current position of pointer instead of this update it with new calculated position which is outside of circle.

If you need code then i can provide it to you.