Hover effect on SVG group elements

Question

Please excuse my ignorance, SVG is very new to me. I'm trying to get a hover effect on a group of elements in my inline SVG. Each group of elements is a closely positioned set of circles. I can achieve this hover effect with css, but obviously this will only work when the mouse is positioned over a circle. What I want is the effect to work when the mouse is over the whole area that contains the circles, so spaces and circles combined.

<style>
svg {
  height: 220px;
  width: 400px;
  background: grey;
}

.na circle,
.as circle {
  fill: white;
}

.na:hover circle {
  fill: blue;
}
</style>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g class="na">
    <circle cx="35%" cy="2.85%" r="2.8" />
    <circle cx="36.75%" cy="2.85%" r="2.8" />
    .
    .
    <circle cx="38.5%" cy="8.55%" r="2.8" />
    <circle cx="40.25%" cy="8.55%" r="2.8" />
  </g>    
</svg>

http://jsfiddle.net/c3EaX/

See when moving the mouse over a group the hover flickers as you go between circle and space between them.

How would you go about getting the mouse over effect to appear to cover the whole area covered by the group? Is there an SVG element that can be used for this?

Answer 1

The accepted answer didn't work for me. I found the following solution:

g {
  pointer-events: bounding-box;
  opacity: 0.4;
}
g:hover {
    opacity: 1;
}