准确检测具有圆角的div的鼠标hover事件

我正在尝试在圆圈上检测鼠标hover事件。我像这样定义圆形div：

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

然后我使用jQuery检测mousover，如下所示：

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

除了整个80px x 80px区域触发mouseover事件外，这种方法效果很好。换句话说，只需触摸div的右下角即可触发鼠标hover事件，即使鼠标未在可见圆圈上方也是如此。

是否有简单且jquery友好的方式来触发圆形区域中的鼠标hover事件？

更新：为了这个问题，让我们假设浏览器支持CSS3并正确渲染border-radius。有没有人有疯狂的数学/几何技能来提出一个简单的方程来检测鼠标是否已进入圆圈？为了使它更简单，我们假设它是一个圆而不是一个任意的边界半径。

如果鼠标的位置太远，请忽略鼠标hover事件。这很简单。取div的中心点，并计算到鼠标指针的距离（距离公式= sqrt((x2 - x1)^2 + (y2 - y1)^2) ），如果它大于圆的半径（ div的宽度的一半），它还不在圆圈中。

不，那里没有。用几何术语来思考。你还在使用div，它是一个盒子元素。该box元素具有特定的矩形边界，可触发鼠标hover事件。使用CSS提供圆形边框仅仅是装饰性的，并不会改变该元素的矩形边界。

你可以用老式的图像映射做类似的事情 – 这里有一个圆形区域。
事实上，这个插件可以帮助你： jQuery MapHilight插件

如果你想让它像你想要的那样工作，那就需要大量的计算。每当鼠标进入一个对象时，你必须首先找出它是否有圆角（考虑到不同的浏览器），然后计算光标是否真的在这些角落内，如果是，则应用hover类。

但是，似乎并不值得所有麻烦。

这是一个使用Javascript计算两个点（圆心和鼠标X /鼠标Y）的距离的snnipet： http ：//snipplr.com/view/47207/