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

Posted 2023-05-08

【中文标题】矩形上的文本会杀死矩形的悬停效果

【英文标题】：Text on a rectangle kills the rectangle's hover effect

【发布时间】：2012-08-17 05:01:50

【问题描述】：

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

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

除此之外，文本放置在每个矩形上方。一对文本和矩形定义了一个组。

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

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

我该如何解决这个问题？

这里是截图：左侧可以看到悬停效果（背景为橙色），右侧可以看到如果光标碰到矩形上的文字，效果如何消失：

谢谢

【问题讨论】：

你试过 text:hover + rect fill: rgb(255,128,0); 吗？

是的，但这当然只会改变文本的颜色

只有文字的颜色？嗯，奇怪..

P.S.我的意思是你的代码加上我的代码。

啊，我明白了，谢谢。仍有问题，请参阅 ScottS 建议

【参考方案1】：

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

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

【讨论】：

也可以在 CSS 中进行，例如 text pointer-events:none 。

谢谢！对我来说，这似乎是最好的解决方案。

【参考方案2】：

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

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

<g class="myclass">
    <rect x="10" y="10"   />
    <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);

【讨论】：

假设g 元素的大小等于rect 元素（在大多数情况下是这样），这应该可以工作，否则悬停可能会在实际进入rect 之前“过早地”发生区域（在g 有一些padding 或其他使其大于rect 的情况下）。

这行得通，谢谢。但就像 ScottS 说的，我必须注意元素的大小