Наведение мыши на диаграмме Венна в CSS

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

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

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

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

РЕДАКТИРОВАТЬ: Спасибо всем за ответы. Я также должен был опубликовать информацию о браузере. Я использую Chrome 12. Пока кажется, что эта ошибка существует в Chrome. Я буду обновлять эту страницу с любыми дальнейшими выводами.

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


html css rounded-corners venn-diagram
person mrBorna    schedule 26.07.2011    source источник
comment
Кажется, у меня нет проблемы. Он подсвечивается, только если я наведу курсор на сам круг.   -  person Devin    schedule 26.07.2011
comment
Он работает так, как вы ожидаете в FF5.0. Какой браузер вы используете?   -  person Jason Kaczmarsky    schedule 26.07.2011
comment
ФФ5. У вас есть проблемы с определенным браузером?   -  person Devin    schedule 26.07.2011
comment
Это действительно в Chrome   -  person PeeHaa    schedule 26.07.2011
comment
Это не работает в Chrome 12.   -  person Felix Kling    schedule 26.07.2011

Ответы (1)


arrow_upward
6
arrow_downward

Я знаю, что возможно рисовать круги с помощью 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. Поддержка Canvas также может быть взломана в старых IE, если она вам действительно нужна.

person Spudley    schedule 26.07.2011