Within my code, I have an SVG image containing 3 paths with the IDs #top, #left, and #right. My goal is to swap their colors when a hover event occurs over the image container (#block).
<svg>
#top /* color 1*/
#left #right /* color 2*/
</svg>
Currently, I am using 3 CSS styles to achieve this effect:
#block:hover #top
{ fill: color2; }
#block:hover #left
{ fill: color1; }
#block:hover #right
{ fill: color1; }
I am wondering if it's possible to combine the last two styles into one like this:
#block:hover #left, #right
{ fill: color1; }
Or perhaps, is there a more efficient way to combine all styles into one?
#block:hover
{
@ #left { fill: color1; }
@ #right{ fill: color1; }
....
}
Thank you for your help!