CSS Venn Diagram鼠标悬停

Question

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

鼠标悬停时圆圈突出显示的位置.但问题是:border-radius如果我将鼠标移到圆圈的一角(圆圈外),则使用该属性,它也会触发悬停.

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

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

编辑:感谢大家的回复.我也应该发布浏览器信息.我正在使用Chrome 12到目前为止,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的所有版本中工作,因为它检测到浏览器并呈现VML而不是SVG(如果它在IE中运行).如果你真的需要,Canvas支持也可以被黑客入侵.