CODEWITHSUNDEEP
javascriptsvgopacity
John Vaughan
John Vaughan

Reputation: 295

Lowering opacity on non-hovered elements

I have twelve svg paths. All of which have 100% opacity.

I would like to hover hover one path keep this at 100% and change the other 11 paths opacity.

Upvotes: 1

Views: 198

Answers (1)

Bergi
Bergi

Reputation: 664196

Embed CSS in you SVG:

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


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

Upvotes: 2

Related Questions