I have the following fiddle which is a start to something I am trying to create in which a circle of colour appears on top of a link with some content inside:
At the moment, I have the circle on the cursor all the time, but I would like to have it only appear when hovering over a link/element.
I would also like to add different content/wording inside the circle depending on each link, something like this:
What would be the best way to do this? Any help would be appreciated.
One way you can approach this is to do a popup of a circle with text inside. You can search for “popup hover” and check out the articles. You’ll likely have to adapt one to get the effect you want. Maybe you can adapt this one to your own use: https://www.w3schools.com/css/css_tooltip.asp
You have a reference to circle.el in global scope. It’s a DOM element so it can be modified or shown/hidden in mouseover and mouseout event listeners on desired elements. Just bind these listeners to your links and change innerHTML of circle.el to value of some attribute of the event target. Hide circle.el using style.display=‘none’ when mouse leaves link and show when its back.
You might also want to add some boolean variable to keep current state of circle, say isDrawingCircle. Set it to true/false when mouse touches or leaves a link. Then check it within your animation functions and do nothing if circle is currently hidden.
Also check some docs about requestAnimationFrame() function. You should use it instead of setInterval. The latter doesnt provide any guarantee to keep intervals equal.
