时间戳

首页 > 解决方案 > 无法使用插入符号选择器覆盖 CSS 指令

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

问题描述

我有一个包含大约60 个按钮的 SVG 文件（内联在 HTML 页面中）。

它们中的每一个都有两个额外的状态，每个状态都有一个形式的 ID：

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

最初 mouseover 和 mousedown 状态隐藏在 CSS 中：

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

当鼠标悬停时，状态应该改变，使用这个函数：

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';
}

上述功能失败。但是，如果我用单个按钮列表替换 CSS 插入符号，则该功能有效：

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

为什么会这样？

有没有办法让我优雅的两行解决方案隐藏 120 个按钮，而不必单独列出它们？

注意SVG 是由 Adob​​e Illustrator 自动生成的，我不能使用CSS 类。

标签： javascriptcssdomcss-selectorsdom-events

解决方案

所以这是一个愚蠢的错误。

父对象也有以mov和mot开头的 ID ，所以当我隐藏未使用的按钮时，我也隐藏了它们的父容器。

第 1 课：小心使用通配符。

第 2 课：当出现问题时，不要认为是因为一些复杂的技术问题而不是愚蠢的错误。

第 3 课：构建一个简单的测试用例来重现问题。

重命名父容器（Illustrator 图层）解决了这个问题。

推荐阅读