css - 矩形上的文本会破坏矩形的悬停效果

Question

我有几个带有悬停效果的 svg 矩形，当鼠标悬停在矩形上时，矩形的背景颜色会发生变化。悬停效果通过css设置:

.myclass:hover {
    fill: rgb(255,128,0);
}

除此之外，文本位于每个矩形上方。一对文本和矩形定义一个组。

<g>
    <rect class="myclass" x="10" y="10" width="40" height="40" />
    <text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>

悬停效果很好，但前提是光标不在文本正上方。如果它恰好位于文本上方，则悬停效果消失。

我该如何解决？

这里是截图:左边你可以看到悬停效果(背景是橙色的)，右边你可以看到当光标碰到矩形上的文本时效果如何消失:

谢谢

Answer 1

您需要使文本具有 pointer-events="none"，以便悬停时忽略它。

<g>
    <rect class="myclass" x="10" y="10" width="40" height="40" />
    <text x="30" y="40" font-family="Verdana" font-size="10" fill="blue" pointer-events="none">ESC</text>
</g>