降低非悬停元素的不透明度

Question

我有十二条svg路径。所有这些都具有100％的不透明度。

我想将鼠标悬停在一条路径上，将其保持在100％并更改其他11条路径的不透明度。

Answer 1

在你的SVG中嵌入CSS：

#paths:hover path {
     opacity:50%;
}
#paths path,
#paths:hover path:hover {
     opacity:100%; /* the default value */
}

<g id="paths">
    <path ... />
    <path ... />
    ...
</g>