CSS 维恩图鼠标悬停答案

【问题标题】：CSS Venn Diagram mouse hoverCSS 维恩图鼠标悬停
【发布时间】：2011-10-13 17:24:42
【问题描述】：

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

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

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

是否有任何 CSS 解决方案可以避免这种情况，还是我必须使用 javascript 计算它？

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

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

【问题讨论】：

【解决方案1】：

我知道用border-radius:50% 画圆圈是可能，但它确实有点小技巧。而且它在 IE8 或更低版本中无法使用，除非使用更多的 hack，比如 CSS3Pie。

因此，虽然我承认您在小提琴示例中制作了一个好看的维恩图，但我认为这不是最好的方法。

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

对于 Canvas，你可以试试这个库：http://www.canvasxpress.org/venn.html

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

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

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

【讨论】：