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

Question

如何创建一个CSS三角形(例如),它将仅在三角形的边框内触发悬停事件？

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

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

Answer 1

您可以尝试使用SVG多边形创建形状,: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的浏览器,有非常有用的链接和替代方案.