悬停在重叠的CSS3形状上

Question

好吧，我有一个关于与通过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：我接受Niels的解决方案，因为他是正确的，盒子模型规定元素是矩形，所以我这样做的方式是错误的。 但是我能够用SVG完成我需要的东西。 如果有人感兴趣，这里有一个小提琴的例子： http ： //jsfiddle.net/uhrHX/1/

Answer 1

CSS标准没有在级别2和3中定义此行为。它们定义的所有内容是：

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

CSS框模型隐含地声明所有块元素形成矩形框。 就像文本不会以圆形方式在你的div周围浮动一样，出于所有意图和目的，你的圆圈在布局上仍然是矩形的，并且在行为上仍然是Webkit。 Gecko开发人员显然已经花了更多的努力来尊重悬停的边界半径，但这实际上是不一致的，因为他们没有为背景等中的“间隙”做这些，这实际上也只是像border-radius一样的视觉变化。

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