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区域触发mouseover事件。换句话说，只要触摸div的右下角就会触发鼠标悬停事件，即使鼠标不在可见圆圈上也是如此。

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

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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