如何在CSS中指定多个悬停事件目标？

Question

我的代码中有一个SVG图像，其中有3个路径，ID为＃top，＃left，＃right。我想将悬停事件的颜色交换到图像容器（#block）上。

<svg>

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

</svg>

目前我有3种CSS样式来实现这个目标：

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

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

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

是否可以将最后两个样式组合成一个样式：

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

或者甚至更好，一个一个？

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

谢谢！

Answer 1

您可以使用http://lesscss.org/或http://sass-lang.com/。 CSS的方式是：

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

并且少用：

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