CSS Venn Diagram при наведении курсора мыши - PullRequest
Новая
       26

CSS Venn Diagram при наведении курсора мыши

10 голосов
/ 26 июля 2011

Я пытаюсь создать чистую диаграмму CSS Венна, как это Example of a Venn Diagram

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

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

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

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

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

1 Ответ

6 голосов
/ 27 июля 2011

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

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

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

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

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

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

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

...