javascript - 准确检测圆角 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'});
});

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

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

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

score 17 · Accepted Answer

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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

score 0 · Accepted Answer

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

不过，似乎不值得所有的麻烦。

5 回答 5