I have an SVG file (inline in an HTML page) with about 60 buttons.

Each of them has two additional states, each of which has an ID of the form:

<g id="mov0-1"><!-- mouseover state -->
<g id="mod0-1"><!-- mousedown state -->

Initially the mouseover and mousedown states are hidden in CSS:

g[id^='mod'] { display: none; }
g[id^='mov'] { display: none; }

When there is a mouseover, the state should change, using this function:

var obj = document.getElementById('link' + c + '-' + x);
obj.addEventListener('mouseover', mov.bind(null, x, c), false); 
...
function mov(x, c){
  var obj_id = 'mov' + c + '-' + x;
  var obj = document.getElementById(obj_id);
  obj.style.display = 'block';
}

The above function fails. However, if I replace the CSS caret with a list of individual buttons, the function works:

g#mov1-0{display:none;}
g#mod1-0{display:none;}

Why is this happening?

Is there a way I can keep my elegant two-line solution that hides 120 buttons instead of having to list them all separately?

N.B. the SVG's are generated automatically by Adobe Illustrator, and I can't use CSS classes.