css - 如何在 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;
    }
}