javascript - 准确检测圆 Angular div的鼠标悬停事件

Question

我正在尝试检测圆圈上的鼠标悬停事件。我这样定义圆 div:

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

然后我像这样使用 jQuery 检测鼠标悬停:

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

除了整个 80px x 80px 区域都会触发鼠标悬停事件外，这工作得很好。换句话说，即使鼠标不在可见圆上，只要触摸 div 的右下角就会触发 mouseover 事件。

是否有一种简单且 jquery 友好的方法来仅在圆形区域触发鼠标悬停事件？

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

Answer 1

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