CODEWITHSUNDEEP
csshover
gskema
gskema

Reputation: 3211

How to specify multiple hover event targets in CSS?

I have an SVG image in my code, there are 3 paths in it with IDs #top, #left, #right. I want to swap their colors on hover event over the image container (#block).

<svg>

    #top           /* color 1*/
#left  #right      /* color 2*/

</svg>

Currently I have 3 CSS styles to achieve this:

#block:hover #top
{ fill: color2; }

#block:hover #left
{ fill: color1; }

#block:hover #right
{ fill: color1; }

Is it possible to combine last two to styles into one like:

#block:hover #left, #right
{ fill: color1; }

Or even better, all into one ?

#block:hover
{ 
  @ #left { fill: color1; }
  @ #right{ fill: color1; }
  ....
}

Thank you !

Upvotes: 0

Views: 270

Answers (1)

Alexander Scholz
Alexander Scholz

Reputation: 2100

You can use http://lesscss.org/ or http://sass-lang.com/ . The CSS way would be:

#block:hover #left, #block:hover #right
    { fill: color1; }

and with less:

#block:hover {
    #left, #right {
        fill: color1;
    }
}

Upvotes: 1

Related Questions