CSS Venn Şeması fareyi

Question

Ben daire fareyi üzerinde vurgulandığına bu

gibi saf css Venn şeması oluşturmak çalışıyorum. Ancak sorun şudur: border-radius özelliğini kullanarak dairenin köşesini (dairenin dışında) farenin üzerine getirirsem, aynı şekilde hover'ı da tetikler. javascript kullanarak bunu hesaplamak zorunda Ganna

bir demo için

this jsfiddle link görüp kırmızı alana

Bunu önlemek için herhangi bir CSS çözüm vardır üzerinde gezdirin veya ben?

DÜZENLEME: Yanıtlar için herkese teşekkürler. Tarayıcı bilgilerini de göndermiş olmalıyım. Chrome 12 kullanıyorum Şu ana kadar bu hata kromda görünüyor. Bu sayfayı daha fazla bulguyla güncelleyeceğim.

GÜNCELLEME Ağustos 2013: Bunu yalnızca 28 üzerinde yeniden test ettik ve sorun artık mevcut değil.

Answer 1

ile daireler çizmek için olduğunu biliyorum, ama gerçekten bir kesmek biraz. Ve IE8 veya daha düşük, CSS3Pie gibi daha fazla kesmek kullanmadan işe yaramıyor.

Keman örneğinizde iyi görünümlü bir Venn diyagramı oluşturduğunuzu kabul ederken, bunu yapmanın en iyi yolu olduğunu sanmıyorum.

Daha iyi bir çözüm, Tuval veya SVG kullanarak şemayı çizmek için uygun bir grafik kitaplığı kullanmak olabilir.

Tuval için, bu kütüphaneyi deneyebilirsiniz: http://www.canvasxpress.org/venn.html

SVG, ben kod yaklaşık dört hatlarında vurgulu-muktedir Venn diyagramları üretecek olan Raphael öneriyoruz.

Ne Canvas ne de SVG'nin IE8 tarafından desteklenmediğini biliyorum, ancak daha sonra ne border-radius, ne de sizin için bir ölçüt olmadığını varsayalım.

Her durumda, IE tarayıcısını algıladığı ve IE'de çalışıyorsa SVG yerine VML oluşturduğu için aslında IE'nin tüm sürümlerinde çalışır. Gerçekten ihtiyacınız varsa, tuval desteği eski IE'lere de bulaşabilir.