CSS diagrama de Venn ratón

Question

estoy tratando de crear un diagrama de Venn css puro como este

Cuando el círculo se destacó en vuelo estacionario ratón. Pero el problema es que si utilizo la propiedad border-radius si muevo el ratón sobre la esquina del círculo (fuera del círculo), también se activa.

para ver una demo this jsfiddle link y se ciernen sobre la zona roja

¿hay alguna solución para evitar este CSS o estoy ganna que calcularla usando javascript?

EDITAR: Gracias a todos por las respuestas. Debería haber publicado la información del navegador también. Estoy usando Chrome 12 Hasta ahora parece que este error existe en Chrome. Actualizaré esta página con cualquier otro hallazgo.

ACTUALIZACIÓN Ago 2013: Acabo de probar esto otra vez en Chrome 28 y el problema ya no existe.

Answer 1

Sé que es posible para dibujar círculos con border-radius:50%, pero realmente es un poco hackeo. Y no funciona en IE8 o inferior, sin usar incluso más hacks, como CSS3Pie.

Así que, aunque acepto que ha producido un diagrama de Venn atractivo en su ejemplo de violín, no creo que sea la mejor manera de hacerlo.

Una solución mucho mejor sería utilizar una librería gráfica adecuada para dibujar el diagrama utilizando lona o SVG.

para el lienzo, puede probar con esta biblioteca: http://www.canvasxpress.org/venn.html

Para SVG, recomendaría Raphael, que producirá los diagramas de Venn libración-poder en unas cuatro líneas de código.

Sé que ni Canvas ni SVG son compatibles con IE8, pero tampoco ninguno es border-radius, por lo que asumo que no es un criterio para usted.

En cualquier caso, Raphael realmente funciona en todas las versiones de IE, ya que detecta el navegador y procesa VML en lugar de SVG si se ejecuta en IE. El soporte de Canvas también se puede piratear en IE más antiguos si realmente lo necesita.