我正在尝试创建一个这样的纯css维恩图
圆圈在鼠标悬停时突出显示的位置.但问题是：如果我将鼠标悬停在圆圈(圆圈外)的角落,则使用border-radius属性,它也会触发悬停.
演示见this jsfiddle link,并悬停在红色区域
有没有任何CSS解决方案来避免这种情况,或者我想用javascript来计算？
编辑：感谢所有的回应.
我也应该发布浏览器信息.我正在使用Chrome 12
到目前为止,Chrome中存在这个bug.我会更新这个页面与任何进一步的发现.
更新2013年8月：在Chrome 28上再次测试了此问题,该问题不再存在.
解决方法
我知道可以画出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支持也可以被黑客入侵.
