javascript - 悬停到自定义形状。如何？

Question

如何创建一个仅在三角形边界内触发悬停事件的 CSS 三角形（例如）？

在实践中，它将是游戏上的位置和上面的不同对象，如果我们将其悬停，它们应该会变得模糊。

请注意，在此演示中，span:hover样式在输入元素的矩形边界时触发，而不是三角形。

Answer 1

您可以尝试使用SVG polygon创建形状，并:hover尊重他的“真实”区域。

请注意，这是一个纯 css + SVG 解决方案，仅适用于自定义形状。而且自定义形状不是用纯 css 创建的，而是 SVG ......

一点点html

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <polygon points="60,0 0,120 120,120"  id="shape"/>
</svg>

非常简单的 CSS！

#shape:hover{fill:red;}

这是一个工作小提琴。

浏览器支持： 这个问题向浏览器支持发送了一些信息。没有公认的答案，但据我所知，对于不支持 SVG 的浏览器，有非常有用的链接和替代方案。