CSS Venn图鼠标悬停

Question

10

我正在尝试创建一个纯CSS维恩图，就像这个 Example of a Venn Diagram

其中鼠标悬停会使圆圈高亮。但问题是：如果我将鼠标悬停在圆圈的角落（圆圈外部），border-radius属性也会触发hover。

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

是否有任何CSS解决方案来避免这种情况，还是我必须使用JavaScript进行计算？

编辑：感谢所有回复。我也应该发布浏览器信息。我正在使用Chrome 12 到目前为止，似乎这个错误存在于Chrome中。如果有进一步发现，我将更新此页面。

更新2023年3月： 再次在Chrome浏览器上测试，该问题已经不存在。

- mrBorna

我似乎没有问题。只有当我悬停在圆圈本身上时，它才会突出显示。 - Devin

它在FF5.0中的表现与您预期的一样。您使用的是哪个浏览器？ - Jason Kaczmarsky

FF5。您是否遇到了某个特定的浏览器问题？ - Devin

1

它确实在Chrome上运行。 - PeeHaa

2

它在Chrome 12中不起作用。 - Felix Kling

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spudley · Accepted Answer

我知道使用border-radius:50%可以画圆，但这种方法有些hack，并且在IE8及以下版本中无法正常工作，需要使用更多的hack，如CSS3Pie。

因此，虽然我认为你在fiddle示例中制作了一个好看的Venn图，但我认为这不是最好的方法。

一个更好的解决方案是使用正确的图形库来使用Canvas或SVG绘制图表。

对于Canvas，您可以尝试使用这个库：http://www.canvasxpress.org/venn.html 对于SVG，我建议使用Raphael，它将在大约四行代码中生成可悬停的Venn图。

我知道Canvas和SVG都不受IE8支持，但border-radius也不被支持，所以我假设这不是你的标准。

无论如何，Raphael实际上在所有版本的IE中都可以工作，因为它检测浏览器并在IE中运行时呈现VML而不是SVG。如果您确实需要它，Canvas支持也可以被hack到旧的IE中。