我有几个具有悬停效果的 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>
悬停效果可以正常工作,但前提是光标不是正好位于文本上方。如果它正好位于文本上方,则悬停效果消失。
我该如何解决这个问题?
这是一个屏幕截图:在左侧您可以看到悬停效果(背景为橙色),在右侧您可以看到如果光标击中矩形上的文本,效果如何消失:
谢谢
最佳答案
您需要使文本具有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>
关于css - 矩形上的文本会消除矩形的悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12061824/