Accurately detect mouseover event for a div with rounded corners

Question

I am trying to detect a mouseover event on a circle. I define the circle div like this:

.circle {
  width: 80px;
  height: 80px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  background-color: #33f;
}

Then I detect the mousover using jQuery like this:

$('.circle').mouseover(function() {
  $(this).css({backgroundColor:'#f33'});
});

This works well, except that the entire 80px by 80px area triggers the mouseover event. In other words, just touching the bottom right corner of the div triggers the mouseover event, even though the mouse is not over the visible circle.

Is there a simple and jquery friendly way to trigger the mouseover event in the circular area only?

Update: For the sake of this question, let's assume that the browser is CSS3 capable and renders the border-radius correctly. Does anyone have the mad math/geometry skills to come up with a simple equation to detect whether the mouse has entered the circle? To make it even simpler, let's assume that it is a circle and not an arbitrary border radius.

Answer 1

Just ignore the mouseover event if the mouse's position is too far away. It's really simple. Take the center point of the div, and calculate the distance to the mouse pointer (distance formula = sqrt((x2 - x1)^2 + (y2 - y1)^2)) and if it's larger than the radius of the circle (half the width of the div), it's not in the circle yet.

Answer 2

No, there is not. Think in geometrical terms. You're still using a div, which is a box element. That box element has a specific rectangular boundary that triggers the mouse over event. The use of CSS to supply a rounded border is cosmetic only, and does not change the rectangular boundary of that element.

Answer 3

You can probably do something like that with an old-fashioned image map - there's a circular area.
In fact, this plugin can help you: jQuery MapHilight Plugin

Answer 4

If you want to get that to work like you intend it to do, it would require considerable amount of calculations. Whenever a mouse enters an object, you would have to first find out whether it has rounded corners (taking in account different browsers), then calculate if the cursor really is inside those corners, and if it is, apply an hover class.

Doesn't seem as being worth all the trouble, though.

Answer 5

Here is an snnipet to calculate the distance betewwn two points (the center of the circle, and the mouseX/mouseY) using Javascript: http://snipplr.com/view/47207/