html – CSS Venn图表鼠标悬停

概述我正在尝试创建一个这样的纯css维恩图 圆圈在鼠标悬停时突出显示的位置.但问题是：如果我将鼠标悬停在圆圈(圆圈外)的角落,则使用border-radius属性,它也会触发悬停. 演示见this jsfiddle link,并悬停在红色区域 有没有任何CSS解决方案来避免这种情况,或者我想用javascript来计算？ 编辑：感谢所有的回应. 我也应该发布浏览器信息.我正在使用Chrome 12 到 我正在尝试创建一个这样的纯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支持也可以被黑客入侵.

总结

以上是内存溢出为你收集整理的html – CSS Venn图表鼠标悬停全部内容，希望文章能够帮你解决html – CSS Venn图表鼠标悬停所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。