css - 单击或悬停时的 CSS Circle 行为

Question

我有一个圈子：

HTML：

<div id="quadrant-sizer"></div>

CSS：

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

我的问题是，当我将鼠标放在圆圈之外，但仍在盒子的高度和宽度之内时，它的行为就好像它在圆圈上一样。基本上，如果鼠标不在圆圈上，它不应该表现得好像它在。如果不能使用 HTML/CSS，有没有办法在 JavaScript 中做到这一点？

score 3 · Accepted Answer

如果您将 CSS 规则更改为：

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

更新：

无论如何，这很可能是浏览器/版本问题。它似乎适用于 Canary 30，但不适用于 Chrome 27 和 28。适用于 Aurora 24。

score 1 · Accepted Answer

目前的浏览器在这种方式处理圆角方面似乎有些不一致，但情况趋于好转。

HTML 创建圆形活动区域的本机方法是使用<map>with <area shape="circle">。但是除了打开链接之外，仍然需要 JS 来可视化交互。

score 1 · Accepted Answer

1

用javascript做基本上是找出鼠标是否在圆圈中。使用这个公式在此处输入图像描述来计算它。

于 2013-07-10T14:05:21.307 回答

3 回答 3