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

发布于 2024-08-17 05:03:12 字数 583 浏览 6 评论 0原文

我正在尝试检测圆圈上的鼠标悬停事件。我这样定义圆形 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 并且正确渲染边框半径。有没有人拥有疯狂的数学/几何技能来想出一个简单的方程来检测鼠标是否已进入圆圈？为了更简单，我们假设它是一个圆，而不是任意的边界半径。

原文

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;
}

Then I detect the mousover using jQuery like this:

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

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.

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

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.

分享到QQ

分享到微博