I am encountering a challenge with my circular element:
Here is the HTML code for it:
<div id="quadrant-sizer"></div>
And here is the CSS styling:
#quadrant-sizer {
width: 40px;
height: 40px;
border-radius: 999px;
}
The issue I'm facing is that when the mouse pointer is outside of the circle but still within the height and width of the box, it behaves as if it's on the circle. Essentially, I want the interaction with the circle to only occur when the mouse is actually on the circle itself. If achieving this behavior isn't possible using just HTML/CSS, would there be a way to implement it using JavaScript?
You can view and interact with an example of my issue here.
For a more visual representation, check out this example.