Reputation: 2728
I have a circle:
HTML:
<div id="quadrant-sizer"></div>
CSS:
#quadrant-sizer {
width: 40px;
height: 40px;
border-radius: 999px;
}
My issue is that when I have the mouse outside of the circle, but still within the hight and width of the box, it will behave as if it is on the circle. Basically, if the mouse is not on the circle, it shouldn't act as if it is. If not possible with HTML/CSS, is there a way to do it in JavaScript?
Upvotes: 2
Views: 1788
Reputation:
What if you change the CSS-rule to:
#quadrant-sizer {
width: 40px;
height: 40px;
border-radius: 50%; /* here */
}
Update:
In any case it is most likely a browser/version issue. It seem to work with Canary 30, but not Chrome 27 and 28. Works with Aurora 24.
Upvotes: 3
Reputation: 13556
Current browsers seem to have some inconsistency in handling rounded corners in this way, but the situation tends to get improved.
The HTML's native way to create a circular active area is using <map>
with <area shape="circle">
. But JS still will be needed to visualize interactions other than just opening a link.
Upvotes: 1
Reputation: 340
Doing it with javascript is basically finding out whether the mouse is in the cirle or not. Use THIS FORMULA for calculating it.
Upvotes: 1