1

我有几个具有悬停效果的 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>

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

我怎么能解决这个问题?

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

比较

谢谢

4

2 回答 2

3

您需要使文本具有 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>
于 2012-08-21T21:25:57.080 回答
1

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

我的建议是将类应用于父元素,并将悬停分配给它。

<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);
}
于 2012-08-21T19:46:04.850 回答