html - 悬停在重叠的 CSS3 形状上

Question

好吧，关于与通过 CSS3 创建的形状进行交互，我有一个潜在的棘手问题。请参阅以下 fiddle :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:我接受 Niels 的解决方案，因为他是正确的，盒子模型规定元素是矩形，所以我的处理方式是错误的。但是我能够用 SVG 完成我需要的东西。如果有人感兴趣，这里有一个 fiddle 示例:http://jsfiddle.net/uhrHX/1/

Answer 1

CSS 标准在第 2 级和第 3 级都没有定义这种行为。它们只定义了:

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.

CSS 盒模型隐含声明所有 block 元素形成矩形盒。正如文本不会以圆形方式围绕您的 div float 一样，出于所有意图和目的，您的圆圈在布局上仍然是矩形的，并且在行为上对 Webkit 而言。 Gecko 开发人员显然已经付出了额外的努力来尊重悬停的 border-radius，但这实际上是不一致的，因为他们不会为背景等中的“差距”而这样做，这些基本上也只是视觉变化，就像 border-radius .

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