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

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