Html SVG悬停事件不'；当同级项目挡道时，不要开火

我有一个带有多个子项的SVG元素。通过查找

：hover

CSS属性，我可以轻松地替换hover上特定元素的填充。但是，如果悬停元素的顶部存在同级元素，则会阻止悬停冒泡到其他元素

这里有一个例子。将鼠标悬停在圆上时，圆的渐变将被替换。但是，只要靠近文本，它就会恢复到原始颜色

.circ:hover{
填充：url（#surfaceGradientHover）；
}

容易的
所以解决这个问题的一种方法是使用
指针事件来防止文本捕捉鼠标事件：

.text{
指针事件：无；
}

但是这个实现很简单，如果用户愿意，它会阻止用户与文本交互。所以一个更好的解决方案会很好


.circ:hover{
填充：url（#surfaceGradientHover）；
}
.文本{
指针事件：无；
}

容易的
一种解决方案是将
圆圈
和
文本
分组


.shape:hover.circ{
填充：url（#surfaceGradientHover）；
}
.形状{
光标：指针；
}

容易的
将鼠标悬停在SVG上。
SVG:hover circ
等等。@Paulie\u D，是的，但是效果会在整个SVG的任何地方触发，而不是在圆圈上……但这不是你想要的。@Paulie\u D，不。也许起泡不是最好的词。泡泡？我希望圆圈像一个按钮一样，在上面悬停时可以改变颜色。但是如果你也在文本上悬停，它会妨碍你。