CSS維恩圖鼠標懸停時

Question

我想創建這樣

凡圓領鼠標懸停時突出了純CSS維恩圖。但問題是：如果將鼠標懸停在圓的一角（圓圈外），則使用border-radius屬性，同樣會觸發懸停。

的演示中看到this jsfiddle link和懸停在紅色區域

有任何CSS的解決方案，以避免這種情況還是我敢拿必須使用JavaScript來計算呢？

編輯：感謝所有的答覆。 我也應該發佈瀏覽器信息。我正在使用Chrome 12 到目前爲止，這個錯誤似乎存在於Chrome中。我會更新此頁面，並提供進一步的調查結果。

更新2013年8月：剛剛在Chrome 28上進行了測試，問題不再存在。

Answer 1

我知道這是可能用border-radius:50%畫圓圈，但它確實有點破解。它不能在IE8或更低版本中工作，而不會使用更多黑客，如CSS3Pie。

因此，雖然我承認你已經產生了您的提琴例如一個好看的維恩圖，我不認爲這是做到這一點的最好辦法。

更好的解決方案將是使用一個適當的圖形庫來繪製使用任一畫布或SVG的圖。

畫布，你可以試試這個庫：http://www.canvasxpress.org/venn.html

對於SVG，我會建議Raphael，這將產生懸停能夠維恩圖在大約四行代碼。

我知道IE8不支持Canvas和SVG，但都不是border-radius，所以我認爲這不是你的標準。

在任何情況下，拉斐爾並實際上IE瀏覽器的所有版本，因爲它檢測到瀏覽器，並呈現VML，而不是SVG，如果它在IE中運行。如果你真的需要的話，Canvas支持也可以被黑客入侵。