CSS souris diagramme de Venn vol stationnaire

Question

Je suis en train de créer un diagramme de Venn pur BAE comme celui-ci

Lorsque le cercle est mise en surbrillance sur le vol stationnaire de la souris. Mais le problème est le suivant: en utilisant la propriété border-radius si je souris sur le coin du cercle (en dehors du cercle), cela déclenche le survol.

pour une démonstration voir this jsfiddle link et planer au-dessus de la zone rouge

est-il une solution CSS pour éviter cela ou suis-je Ganna la calculer en utilisant javascript?

EDIT: Merci à tous pour les réponses. J'aurais aussi dû poster les informations du navigateur. J'utilise Chrome 12 Jusqu'à présent, il semble que ce bug existe en chrome. Je mettrai à jour cette page avec d'autres résultats.

MISE À JOUR août 2013: Juste testé à nouveau sur Chrome 28 et le problème n'existe plus.

Answer 1

Je sais que c'est possible pour dessiner des cercles avec border-radius:50%, mais c'est vraiment un peu un hack. Et cela ne fonctionne pas dans IE8 ou moins, sans utiliser encore plus de hacks, comme CSS3Pie.

Donc, bien que j'accepte que vous ayez produit un beau diagramme de Venn dans votre exemple de violon, je ne pense pas que ce soit la meilleure façon de le faire.

Une solution beaucoup mieux serait d'utiliser une bibliothèque graphique appropriée pour dessiner le diagramme en utilisant soit Canvas ou SVG.

pour la toile, vous pouvez essayer cette bibliothèque: http://www.canvasxpress.org/venn.html

Pour SVG, je recommanderais Raphael, qui produira des diagrammes de Venn en vol stationnaire mesure environ quatre lignes de code.

Je sais que ni Canvas ni SVG ne sont supportés par IE8, mais aucun n'est border-radius, donc je suppose que ce n'est pas un critère pour vous.

Dans tous les cas, Raphael fonctionne réellement dans toutes les versions d'IE, car il détecte le navigateur et rend VML au lieu de SVG s'il fonctionne dans IE. La prise en charge du canevas peut également être piratée dans des IE plus anciens si vous en avez vraiment besoin.