我正在尝试创建一个像这样的纯 CSS 维恩图
鼠标悬停时圆圈突出显示的位置。但问题是：border-radius如果我将鼠标悬停在圆角（圆外）上，则使用该属性，它也会触发悬停。
有关演示，请参阅此 jsfiddle 链接 并将鼠标悬停在红色区域上
是否有任何 CSS 解决方案可以避免这种情况，或者我是否必须使用 javascript 来计算它？
编辑：感谢大家的回复。我也应该发布浏览器信息。我正在使用 Chrome 12 到目前为止，似乎这个错误存在于 chrome 中。我将用任何进一步的发现更新此页面。
2013 年 8 月更新：刚刚在 Chrome 28 上再次测试，问题不再存在。
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.