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