如下所示,当我将鼠标光标从下面的多边形移动到上面的多边形时,:hover
状态无法正常工作:
polygon {
stroke-width: 5;
stroke: red;
fill: none;
}
polygon:hover {
fill: red;
}
<svg viewBox="0 0 999 799">
<polygon points="445,161 345,174 500,10" />
<polygon points="445,161 345,174 500,270" />
</svg>
在Chrome和Firefox中测试,结果相同。
如何实现SVG多边形在鼠标光标进入其边界后立即切换到:hover
状态?
fill:none
会影响指针事件,最好使用fill: transparent
。试一下看是否有帮助。这对我来说似乎有用这里,但我无法将其作为答案发布,因为我没有一个确定的解释。 - Harry