使用CSS类设置SVG组的样式

我想突出显示使用CSS的SVG组。我尝试了以下代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css">
    * {stroke: black; fill: white}
    .A:hover {fill: orange}
    .B:hover {fill: blue}
  </style>
  <g class="A">
    <circle cx="100" cy="100" r="50" />
    <circle cx="250" cy="100" r="50" />
  </g>
  <circle class="B" cx="400" cy="100" r="50" />
</svg>

*{笔划：黑色；填充：白色}
.A:悬停{填充：橙色}
.B:悬停{填充：蓝色}

---

但前两个圆圈在悬停时不会变成橙色（在狩猎和歌剧中）。我做错了什么？

将在悬停的

上设置填充，但另一个选择器将覆盖圆圈上的填充

替换：

.A:hover {fill: orange}

与：

---

请参阅。

在页眉而不是正文中添加样式。@arbit：此处不需要分号。邦迪：这种风格很好，svg中没有or。

.A:hover * {fill: orange}