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.