CSS Venn Diagram鼠标悬停

Question

我正在尝试创建一个像这个

的纯CSS cn维恩图

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

演示请参阅this jsfiddle link并将鼠标悬停在红色区域

上

是否有任何CSS解决方案可以避免这种情况，或者我是否需要使用javascript来计算它？

编辑：感谢大家的回复。 我也应该发布浏览器信息。我正在使用Chrome 12 到目前为止，似乎这个bug存在于chrome中。我将更新此页面以及任何进一步的调查结果。

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

Answer 1

我知道可能用border-radius:50%绘制圆圈，但它确实有点像黑客。它在IE8或更低版本中不起作用，不使用CSS3Pie等更多黑客攻击。

因此，虽然我接受你在你的小提琴例子中制作了一张好看的维恩图，但我认为这不是最好的方法。

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

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

对于SVG，我建议使用Raphael，它将在大约四行代码中生成可悬停的维恩图。

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

在任何情况下，Raphael确实可以在IE的所有版本中工作，因为它检测浏览器并在IE中运行时呈现VML而不是SVG。如果你真的需要，Canvas支持也可以被黑客入侵。