降低非懸停元素上的不透明度

Question

我有十二個SVG路徑。所有這些都具有100％的不透明度。

我想將鼠標懸停在一條路徑上，將其保持爲100％，並更改其他11條路徑的不透明度。

Answer 1

CSS嵌入在你SVG：

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

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