如何在悬停时更改两个不同类中的两个属性？

Question

我在SVG文件中创建了两个类来决定许多不同形状的填充颜色。不同的形状被分组，现在我希望它们在悬停时有不同的变化。在悬停时，我希望所有填写类“test1”（在groupe内部）改为例如＃000000并将类“test2”中的不透明度设置为0.8。

<style type="text/css" >
    .test1 { fill:  #006600;}
    .test2 { fill:  #0000FF; opacity: 0.3;}
    g:hover { ????? }
</style>

任何线索？

Answer 1

假设有一个标记，例如......

<g>
  <rect class="test1" ... />
  <rect class="test1" ... />
  <rect class="test2" ... />
  <rect class="test2" ... />
</g>

你的CSS会......

.test1 { fill:  #006600;}
.test2 { fill:  #0000FF; opacity: 0.3;}
g:hover .test1 { fill: #000; }
g:hover .test2 { opacity: 0.8; }