准确检测圆角 div 的鼠标悬停事件答案

【问题标题】：Accurately detect mouseover event for a div with rounded corners准确检测圆角 div 的鼠标悬停事件
【发布时间】：2011-01-01 15:52:25
【问题描述】：

我正在尝试检测圆圈上的鼠标悬停事件。我这样定义圆形 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'});
});

这很好用，只是整个 80 像素乘 80 像素的区域都会触发鼠标悬停事件。换句话说，只要触摸 div 的右下角就会触发 mouseover 事件，即使鼠标不在可见的圆圈上。

是否有一种简单且 jquery 友好的方式来仅在圆形区域中触发 mouseover 事件？

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

不，没有。用几何术语思考。您仍在使用 div，它是一个框元素。该框元素具有触发鼠标悬停事件的特定矩形边界。使用 CSS 提供圆形边框只是装饰性的，不会改变该元素的矩形边界。

【讨论】：

【解决方案3】：

您可以使用老式的图像地图来做类似的事情 - 有一个圆形区域。
其实这个插件可以帮到你：jQuery MapHilight Plugin

【讨论】：

【解决方案4】：

如果您想让它按照您的预期工作，则需要进行大量计算。每当鼠标进入一个对象时，您必须首先确定它是否具有圆角（考虑到不同的浏览器），然后计算光标是否真的在这些角内，如果是，则应用悬停类。

不过，似乎不值得费这么多麻烦。

【讨论】：

【解决方案5】：

这是一个使用 Javascript 计算两点（圆心和 mouseX/mouseY）之间距离的片段：http://snipplr.com/view/47207/

【讨论】：