矩形上的文本会杀死矩形的悬停效果

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

你需要让文字有指针 - 事件=＆＃34;无＆＃34;所以它被悬停所忽略。

<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>

Answer 2

问题是将悬停分配给位于文本后面的元素。因此，当您将鼠标悬停在文本上时，技术上不再触及背景了。

我的建议是将类应用于父元素，并将悬停指定给它。

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

现在你的CSS看起来像这样，目标是子“rect”元素：

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