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