Track mouse and display an html element around mouse

Demo here

How it works:

• Html (Have an html element that will be displayed around and move along with the mouse)
• CSS (Style the element that should move along with the mouse)
• by mentioning position as absolute, we can set the top, left property of an html element to position it anywhere on the page. More info here
• JS
• Register for mouse move event.
• In the mouse move event handler, get the mouse co ordinates
• Set the top and left of the element that should move along with the mouse

Notes:

• To display circle we set border-radius = 50% of width
• Elements can positioned freely on the page by mentioning top and left css properties only the position is set to absolute
• Mouse co ordinates can only be retrieved inside an event handler