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

Question

我试图在圆圈上检测鼠标悬停事件.我像这样定义圆形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乘80px区域触发鼠标悬停事件外,这种方法效果很好.换句话说,只需触摸div的右下角即可触发鼠标悬停事件,即使鼠标未在可见圆圈上方也是如此.

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

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

Answer 1

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