javascript - 悬停时的 Svg 使组可见

Question

我试图让一个特定的组在悬停在其他组上时可见。我为我想要设置样式的组制作了唯一的 ID。 之后，我还需要在展示团队的过程中为它们制作动画。 所以我尝试了 display:none 作为最后的手段但没有用，我想使用 opacity:0 - 1;否则可见性将是最好的事情。

第二个问题是我不想使用内联 svg ，所以我从“img”标签转移到对象标签，但后来我没有找到任何有用的资源来实现它。我正在从其他服务提供商处获取 svg 代码，而不是将其存储在本地存储中。 是否有可能只有一个 svg 文件或任何其他文件可以与我的 html 文件链接，这样我就不需要在我的父 css、js 文件中添加任何 css 或 js。

所以在这个例子中，

g#a:hover + #content-a{
display: block !important;
} 
#a:hover + #content-a{
display: block !important;
}

最初

#content-a{ display:none}
#content-b{ display:none}

还有一些我读过的关于使用的文章

<use /> 

会不会更有效率。另外，我将如何通过 vanilla javascript 使其在加载时内联。

这是链接 - Sample

Answer 1

E + F:一个 F 元素紧接在一个 E 元素之前

E ~ F:一个F元素前面有一个E元素

虽然 display: block 有效，但默认实际上是 display: inline

#a:hover ~ #content-a {
    display: inline;
}