单击或悬停时的CSS循环行为

我有一个圆圈：

HTML:

我的问题是，当我将鼠标放在圆外，但仍在框的高度和宽度范围内时，它的行为就好像它在圆上一样。基本上，如果鼠标不在圆圈上，它就不应该表现为在圆圈上。如果HTML/CSS无法实现，有没有办法用JavaScript实现

---

如果将CSS规则更改为：

#quadrant-sizer {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* here */
}

更新：

---

无论如何，这很可能是浏览器/版本问题。它似乎适用于金丝雀30，但不适用于铬27和28。与Aurora 24配合使用。

使用javascript基本上就是确定鼠标是否在圆环中。用于计算它。

当前的浏览器在以这种方式处理圆角方面似乎有一些不一致之处，但情况并非如此

---

HTML创建圆形活动区域的本机方法是将

与

一起使用。但是，除了打开链接之外，还需要使用JS来可视化交互。

您在什么浏览器中看到这一点？它看起来像一只虫子。例如，在Chrome 28中，这是正确的…Chrome 28，看看第二个示例，当您将鼠标悬停在黄色圆圈的右下角时，鼠标行为将发生变化。可能第二个示例的副本会这样做，但它仍然有错误behavior@Raymond这很可能是浏览器/版本问题。它似乎适用于金丝雀30，但不适用于铬27和28。与Aurora 24合作。这是如何解决问题的？不管它是px还是%。@Christoph不重要。这是第一个反应的一部分（无论如何，这是一个正确的圆圈）。随后添加了底部文本（请参见编辑历史记录和更新的答案）。

#quadrant-sizer {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

#quadrant-sizer {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* here */
}