How to specify multiple hover event targets in CSS?

Question

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 !

Alexander Scholz · Accepted Answer · 2013-08-18 10:43:10Z

1

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;
    }
}

edited Aug 18, 2013 at 10:43

answered Aug 18, 2013 at 10:36

Alexander Scholz

2,1002 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to specify multiple hover event targets in CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related