无法使用插入符号选择器覆盖 CSS 指令

Question

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?

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

Answer 1

So it was a boneheaded mistake.

The parent objects also had ID's that began with mov and mot , so when I hid the unused buttons, I also hid their parent containers.

Lesson 1: be careful with wildcards .

Lesson 2: when something breaks, don't assume it's because of some elaborate technical thing instead of a stupid error .

Lesson 3: build a simple test case to reproduce the problem .

Renaming the parent containers (Illustrator layers) fixed the problem.