在边界半径处单击或悬停在Chrome中的行为与在Firefox中的行为不同

Question

说我们在一个圆圈内有一些内容：

div:hover {
  border: 1px solid red;
}

<div style="padding: 1%; overflow: hidden; border-radius: 50%;">I'm content!</div>

在Firefox中，如果将鼠标悬停在圆圈外的任何位置，则将不再显示红色边框。

但是，在chrome中，如果您将鼠标悬停在边界框的一个角内但在圆的外部，即使您将鼠标悬停在圆的外部，您仍将具有红色边框。

点击事件发生相同的差异。

我的问题是：在chrome中，有没有一种简单的方法可以检测到光标在圆之外？ CSS？ JS？

最好，答案是简单的东西，可以很容易地应用于所有四舍五入的盒子，而不是像：计算圆的面积等。

谢谢！

Answer 1

我在这里看不到任何问题。您可以在div上添加边框，使用chrome / Firefox工具栏来确定焦点，悬停等情况。

让我知道是否合理。

Answer 2

对于这样的事情，我建议使用Konva.js。

这是我使用Konva.js所做的项目代码的链接，该代码能够检测其点击位置（在这种情况下，是在墙上2d相框的钉子上以输出测量值）并输出结果，无论是否使用chrome，firefox等。悬停时可以轻松实现相同的功能。

代码：https://github.com/JsonTyler/framed/blob/master/assets/js/script.js（从第313行开始，并查看工具提示的定位逻辑）

实时演示的说明：基本上，进入页面后，将滚动条调整为一定的高度和宽度。然后按“创建”。然后选择一个背景。最后，选择一个框架大小以使其显示在画布上。将鼠标悬停在框架上以查看框架尺寸。然后在将钉子拖到画布上所需的位置后单击钉子，以获取钉子与画布的左，右，底部和顶部之间的距离的真实度量。