将鼠标悬停在自定义形状上如何？

Question

如何创建一个CSS三角形（例如），它只会在三角形的边框内触发悬停事件？

在实践中，它将是游戏中的位置以及它上面的不同物体，如果我们将它悬停在它上面就会模糊。

请注意，在此demo中，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;}

这是working fiddle。

浏览器支持： This question向浏览器支持发送一些信息。没有可接受的答案，但据我所知，对于不支持SVG的浏览器，有非常有用的链接和替代方案。