CODEWITHSUNDEEP
css
Ray
Ray

Reputation: 2728

CSS Circle behavior when click or hover

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?

My example

Easier to visualize example

Upvotes: 2

Views: 1788

Answers (3)

user1693593
user1693593

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

Ilya Streltsyn
Ilya Streltsyn

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

Setup
Setup

Reputation: 340

Doing it with javascript is basically finding out whether the mouse is in the cirle or not. Use THIS FORMULA enter image description here for calculating it.

Upvotes: 1

Related Questions