CSS Venn图鼠标悬停

Question

我正在尝试创建一个像这样的纯CSS Venn图

鼠标悬停时圆圈突出显示的位置。 但是问题是：如果我将鼠标悬停在圆角（圆外）上，则使用border-radius属性，它也会触发悬停。

对于演示，请参见此jsfiddle链接并将鼠标悬停在红色区域上

有没有CSS解决方案来避免这种情况，还是我想使用javascript计算它？

编辑：感谢所有的答复。 我也应该发布浏览器信息。 我正在使用Chrome 12到目前为止，似乎该错误存在于chrome中。 我将用任何进一步的发现更新此页面。

2013年8月更新：刚刚在Chrome 28上再次进行了测试，该问题不再存在。

Answer 1

我知道有可能用border-radius:50%绘制圆，但这确实有点技巧。 如果不使用CSS3Pie之类的更多技巧，它就无法在IE8或更低版本中工作。

因此，尽管我接受您在小提琴示例中制作了漂亮的维恩图，但我认为这不是最好的方法。

更好的解决方案是使用适当的图形库通过Canvas或SVG绘制图。

对于Canvas，您可以尝试以下库： http : //www.canvasxpress.org/venn.html

对于SVG，我推荐Raphael ，它将以大约四行代码生成可悬停的Venn图。

我知道IE8不支持Canvas和SVG，但是border-radius都不支持，所以我认为这不是您的标准。

无论如何，Raphael实际上可以在所有版本的IE上运行，因为它可以检测浏览器并在IE中运行时呈现VML而不是SVG。 如果您确实需要Canvas支持，也可以入侵较旧的IE。