CSS Venn Diagram мышь - программирование

Я пытаюсь создать чистую диаграмму Vess css, подобную этой

Если круг подсвечивается при наведении мыши. Но проблема заключается в следующем: использование свойства border-radius, если мышь над углом круга (вне круга), также вызывает зависание.

для демонстрации см. эту ссылку jsfiddle и наведите курсор на красную область

Есть ли какое-нибудь решение CSS, чтобы избежать этого, или мне нужно рассчитать его с помощью javascript?

EDIT: Спасибо всем за ответы. Я должен был также разместить информацию о браузере. Я использую Chrome 12 Пока кажется, что эта ошибка существует в хроме. Я буду обновлять эту страницу с любыми дальнейшими результатами.

ОБНОВЛЕНИЕ Август 2013: Просто повторил это снова в Chrome 28, и проблема больше не существует.

Ответ 1

Я знаю, что можно рисовать круги с помощью border-radius:50%, но это действительно немного взломан. И это не работает в IE8 или ниже, не используя еще больше хаков, например CSS3Pie.

Итак, хотя я согласен с тем, что вы создали красивую диаграмму Венна в своем примере скрипта, я не думаю, что это лучший способ сделать это.

Лучшим решением было бы использовать правильную графическую библиотеку для рисования диаграммы с использованием Canvas или SVG.

Для Canvas вы можете попробовать эту библиотеку: http://www.canvasxpress.org/venn.html

Для SVG я бы рекомендовал Raphael, который создаст диаграммы Венна с возможностью зависания примерно в четырех строках кода.

Я знаю, что ни Canvas, ни SVG не поддерживаются IE8, но тогда ни один из них не является border-radius, поэтому я предполагаю, что это не является критерием для вас.

В любом случае, Raphael действительно работает во всех версиях IE, поскольку он обнаруживает браузер и визуализирует VML вместо SVG, если он работает в IE. Поддержка холста также может быть взломана в более старые IE, если вам это действительно нужно.