准确检测具有圆角的div的mouseover事件 [英] Accurately detect mouseover event for a div with rounded corners

问题描述

我想检测一个圆圈上的鼠标悬停事件。我像这样定义圆形div：

I am trying to detect a mouseover event on a circle. I define the circle div like this:

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

然后我使用jQuery来检测mousover，如下：

Then I detect the mousover using jQuery like this:

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

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

This works well, except that the entire 80px by 80px area triggers the mouseover event. In other words, just touching the bottom right corner of the div triggers the mouseover event, even though the mouse is not over the visible circle.

有简单的jquery友好的方式只触发鼠标悬停事件在圆形区域？

Is there a simple and jquery friendly way to trigger the mouseover event in the circular area only?

更新：为了这个问题，让我们假设浏览器是CSS3能力，并正确渲染border-radius。有没有人有疯狂的数学/几何技能，想出一个简单的方程来检测鼠标是否已进入圈子？

Update: For the sake of this question, let's assume that the browser is CSS3 capable and renders the border-radius correctly. Does anyone have the mad math/geometry skills to come up with a simple equation to detect whether the mouse has entered the circle? To make it even simpler, let's assume that it is a circle and not an arbitrary border radius.

推荐答案

只要忽略鼠标悬停事件，就可以让它更简单了，让我们假设它是一个圆形而不是任意边框半径。如果鼠标的位置太远了。这真的很简单。取div的中心点，并计算到鼠标指针的距离（距离公式= sqrt（（x2 - x1）^ 2 +（y2 - y1）^ 2）），如果它大于圆的半径（div的一半宽度），则它不在圆圈中。

Just ignore the mouseover event if the mouse's position is too far away. It's really simple. Take the center point of the div, and calculate the distance to the mouse pointer (distance formula = sqrt((x2 - x1)^2 + (y2 - y1)^2)) and if it's larger than the radius of the circle (half the width of the div), it's not in the circle yet.

这篇关于准确检测具有圆角的div的mouseover事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！