html – CSS Venn图表鼠标悬停

发布时间：2020-12-14 18:54:33 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个这样的纯css维恩图圆圈在鼠标悬停时突出显示的位置.但问题是：如果我将鼠标悬停在圆圈(圆圈外)的角落,则使用border-radius属性,它也会触发悬停. 演示见this jsfiddle link,并悬停在红色区域有没有任何CSS解决方案来避免这种情况,或者我

我正在尝试创建一个这样的纯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支持也可以被黑客入侵.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!