懸停在重疊的CSS3形狀上

好吧我有一個潛在的棘手問題，即與通過CSS3創建的形狀進行交互。請參閱下小提琴：http://jsfiddle.net/MH4LN/1/懸停在重疊的CSS3形狀上

代碼示例：

<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寬度/高度的一半（創建一個圓形）來創建形狀。但是，當您將鼠標懸停在半徑隱藏的空白區域上時，您仍然會在該元素上觸發懸停狀態。下面就來說明我的意思的圖像：

Sad hover makes me sad.

有什麼辦法避免這種情況？我需要使用canvas元素而不是簡單的圓角div嗎？

編輯：看起來這是特定於WebKit瀏覽器，因爲它在Firefox中正常工作。

編輯2：我接受Niels的解決方案，因爲他是正確的，盒子模型規定元素是矩形，所以我這樣做的方式是錯誤的。但是，我能夠用SVG完成我所需的工作。這裏有一個例子小提琴的情況下，任何人有興趣：http://jsfiddle.net/uhrHX/1/

來源

2013-04-12 Ian

這是特定於某個瀏覽器嗎？這個例子適用於FF。 –

看起來像是特定於WebKit。問題出現在Safari和Chrome中。 – Ian

這是因爲元素本身仍然是一個正方形/矩形，基本上邊界半徑組件是透明的。沒有純粹的CSS方式來處理這個問題，而不涉及大量不必要的HTML和CSS標記。順便說一句，一個更簡單的方法來做一個圓是'border-radius：50％;'....只是一個旁註。 – PlantTheIdea

的CSS標準沒有在2級也不3.所有他們下定義這種行爲是：

：hover僞類適用，而用戶用指針設備指定元素，但不一定激活它。例如，當光標（鼠標指針）懸停在元素生成的框上時，可視用戶代理可以應用此僞類。

CSS盒模型隱式指出所有塊元素都形成矩形框。就像文本不會以循環的方式浮在你的div上一樣，出於所有的意圖和目的，你的圓形在佈局上仍然是矩形的，而在Webkit中則是行爲。壁虎開發者顯然已經花了更多的時間去尊重邊界半徑，但實際上這並不一致，因爲他們不會在背景等等的「缺口」上做這件事，它們本質上也只是像邊界半徑一樣的視覺變化。

總之，不要指望瀏覽器行爲在這方面發生變化，因爲CSS標準沒有定義行爲。正確實現跨瀏覽器的唯一方法是使用Javascript和一些智能的畢達哥拉斯計算鼠標位置。

來源

2013-04-12 20:23:03

懸停在重疊的CSS3形狀上

回答

相關問題