Html 闪烁svg组打开：悬停？

当鼠标悬停在我的svg上时，我试图让“HI”svg组消失，并显示“BYE”形状。相反，它会在两组之间快速闪烁——我不确定我是否把分组搞砸了，或者什么的，但是如果能得到帮助，我将不胜感激

svg{height:30vw；display:block；margin:auto；}
.section:hover#bye.show{display:block；}
.section:hover#hi.hide{display:none；}

---

仅保持悬停状态，并将其应用于svg而不是

部分

svg{
高度：30vw；
显示：块；
保证金：自动；
}
svg:hover#hi.hide{
显示：无；
}

---

让多个按钮像这样工作

svg{
高度：30vw；
显示：块；
保证金：自动；
}
.表演{
显示：无；
}
.部分：悬停#hi.hide{
显示：无；
} 
.部分：悬停#再见.show{
显示：块；
}   
.部分：悬停#红色.隐藏{
显示：无；
}  
.section:hover#blue.show{
显示：块；
}

因此，如果我有多个方形按钮，那么在

容器中是否仍有这些按钮？或者我必须为每个容器创建一个新的

容器…？@Mogie no您可以将它们放在同一个SVG中，但直接在它们上应用悬停效果会产生闪烁，因为它们会消失，所以最好将悬停保持在SVG上