懸停在重疊的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計算鼠標位置。