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;
  -         


        

Answer 1

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 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

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 4

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/

Answer 5

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.