Css SVG悬停状态在多个层上，而不仅仅是顶层

我想将决策树显示为具有某种交互性的SVG。不同的路径都在那里，悬停时不透明度增加。但是悬停状态似乎只适用于顶部元素

#flow polyline {
  stroke: #0071bc;
  stroke-opacity: 0;
  stroke-width: 8px;

  mix-blend-mode: color;
}
#flow polyline:hover {
  stroke-opacity: 1;
}

如何将悬停事件应用于所有悬停的svg多段线，而不仅仅是顶层

---

跟进问题: 有没有一种方法可以使悬停状态应用在更宽的路径上，这样我就不必准确地越过线了

如何将悬停事件应用于所有悬停的svg多段线，而不仅仅是顶层

世上没有琐碎的方法。您需要检测您结束的部分，确定哪些部分应该突出显示，然后自己手动突出显示它们

有没有一种方法可以使悬停状态应用在一条更宽的路径上，这样我就不必完全越过这条线

可以，使用单独的透明粗线

.line{
笔画：灰色；
笔画宽度：2；
}
.线路更宽{
笔画：透明；
笔画宽度：40；
}
g:悬停线{
笔画：蓝色；
}