10

I'm trying to create a pure css Venn diagram like this Example of a Venn Diagram

Where the circle gets highlighted on mouse hover. But the problem is: using the border-radius property if I mouse over the corner of the circle (outside the circle) , it triggers hover as well.

for a demo see this jsfiddle link and hover over the red area

is there any CSS solution to avoid this or am I ganna have to calculate it using javascript?

EDIT: Thanks to all for the responses. I should have posted the browser information as well. I'm using Chrome 12 So far it seems this bug exists in chrome. I will update this page with any further findings.

UPDATE Aug 2013: Just tested this again on Chrome 28 and the issue no longer exists.

mrBorna
  • 1,757
  • 16
  • 16

1 Answers1

6

I know it's possible to draw circles with border-radius:50%, but it really is a bit of a hack. And it doesn't work in IE8 or lower, without using even more hacks, like CSS3Pie.

So while I accept that you've produced a good-looking Venn diagram in your fiddle example, I don't think it's the best way to do this.

A much better solution would be to use a proper graphics library to draw the diagram using either Canvas or SVG.

For Canvas, you could try this library: http://www.canvasxpress.org/venn.html

For SVG, I would recommend Raphael, which will produce hover-able Venn diagrams in about four lines of code.

I know that neither Canvas nor SVG are supported by IE8, but then neither is border-radius, so I assume that isn't a criteria for you.

In any case, Raphael does actually work in all versions of IE, as it detects the browser and renders VML instead of SVG if it's running in IE. Canvas support can also be hacked into older IEs if you really need it.

Spudley
  • 166,037
  • 39
  • 233
  • 307