styling SVG groups using CSS classes

Question

I would like to highlight SVG groups using CSS. I have tried the following code

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

but the first two circles do not turn orange upon hover (in Safari and Opera). What am I doing wrong?

Answer 1

Fill will get set on the hovered <g>, but the other selector overrides the fill on the circles.

Replace:

.A:hover {fill: orange}

With:

.A:hover * {fill: orange}

See fiddle.