3

好吧，关于与通过 CSS3 创建的形状进行交互，我有一个潜在的棘手问题。请参阅以下小提琴：http: //jsfiddle.net/MH4LN/1/

代码示例：

<div class="container">
    <div class="l1"></div>
    <div class="l2"></div>
    <div class="l3"></div>
</div>

使用以下 CSS：

.container {
    width: 570px; height: 570px;
    position: relative;
}
.l1 {
    width: 352px;
    height: 352px;
    background: red;

    position: absolute;
    top: 109px;
    left: 109px;
    z-index: 999;

    -webkit-border-radius: 176px;
    border-radius: 176px;
}
.l2 {
    width: 464px;
    height: 464px;
    background: blue;

    position: absolute;
    top: 53px;
    left: 53px;
    z-index: 998;

    -webkit-border-radius: 232px;
    border-radius: 232px;
}
.l3 {
    width: 570px;
    height: 570px;
    background: green;

    position: absolute;
    z-index: 997;

    -webkit-border-radius: 285px;
    border-radius: 285px;
}

.l1:hover, .l2:hover, .l3:hover {
    background: #fff;   
}

我的问题是：我想在悬停时将 CSS 应用于每个形状。通过将边框半径设置为 div 宽度/高度的一半（创建一个圆）来创建形状。但是，当您将鼠标悬停在被半径隐藏的空白区域时，您仍然会在该元素上触发悬停状态。这是一张图片来说明我的意思：

悲伤的悬停让我难过。

有没有办法避免这种情况？我需要为此使用canvas元素而不是简单的圆形div吗？

编辑：看起来这是特定于 WebKit 浏览器的，因为它在 Firefox 中运行良好。

编辑2：我接受尼尔斯的解决方案，因为他是正确的，盒子模型规定元素是矩形，所以我这样做的方式是错误的。但是，我能够使用 SVG 完成我需要的工作。如果有人感兴趣，这是一个 Fiddle 示例：http: //jsfiddle.net/uhrHX/1/

4

1 回答 1

4

CSS 标准没有在第 2 级和第 3 级定义这种行为。他们定义的只是：

:hover 伪类在用户使用指针设备指定元素时应用，但不一定激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。

CSS 盒子模型隐含地声明所有块元素都形成矩形盒子。正如文本不会以圆形方式围绕您的 div 浮动一样，出于所有意图和目的，您的圆圈在布局上仍然是矩形的，在行为上对于 Webkit 来说仍然是矩形的。Gecko 开发人员显然已经付出了额外的努力来尊重悬停的边界半径，但这实际上是不一致的，因为他们不会为背景中的“间隙”等而这样做，这本质上也只是视觉变化，就像边界半径一样.

简而言之，不要期望浏览器的行为会因此而改变，因为 CSS 标准没有定义行为。跨所有浏览器正确实现它的唯一方法是使用 Javascript 和一些智能毕达哥拉斯计算鼠标位置。

于 2013-04-12T20:23:03.660 回答