CSS hover时如何控制同class的多个无层级关系元素同时改变样式

结论 #

• 纯CSS可以实现，但存在浏览器兼容、结构限制和维护成本问题
• 灵活可扩展的场景推荐优先使用JS实现

纯CSS实现思路 #

该方案依赖CSS :has() 选择器，需要所有钢琴按键处于同一个父容器内，同时给同音名的按键设置统一类名（如所有C音加note-C、升C加note-Csharp，共12组对应12个音名），示例代码如下：

/* C音默认样式 */
.note-C {
  background: #ffffff;
}
/* 父容器内任意C音被hover时，所有C音同步高亮 */
.keyboard-container:has(.note-C:hover) .note-C {
  background: #ff4c4c;
}

/* 其余11个音按相同规则重复编写即可 */
.note-Csharp {
  background: #000000;
}
.keyboard-container:has(.note-Csharp:hover) .note-Csharp {
  background: #4c7dff;
}

限制说明 #

• 仅支持Chrome 105+、Firefox 121+、Safari 15.4+以上版本浏览器，老版本浏览器无效果
• 12个音需要编写12组重复规则，后续修改类名或样式需要同步修改所有规则，维护成本高
• 所有按键必须在同一个父容器下，如果结构上按键分散在不同子容器内则无法生效

更推荐的JS实现方案 #

不受结构和浏览器版本限制，代码量小且扩展性强，步骤如下：

1. 给所有钢琴按键加自定义属性标记音名，如data-note="C"、data-note="Csharp"
2. 编写JS事件逻辑：

const allKeys = document.querySelectorAll('.piano-key');
allKeys.forEach(key => {
  // 鼠标移入触发高亮
  key.addEventListener('mouseenter', () => {
    const currentNote = key.dataset.note;
    document.querySelectorAll(`[data-note="${currentNote}"]`).forEach(noteKey => {
      noteKey.classList.add('highlight');
    });
  });
  // 鼠标移出取消高亮
  key.addEventListener('mouseleave', () => {
    const currentNote = key.dataset.note;
    document.querySelectorAll(`[data-note="${currentNote}"]`).forEach(noteKey => {
      noteKey.classList.remove('highlight');
    });
  });
});

3. 补充CSS高亮样式：

.piano-key.highlight {
  background: #ff4c4c;
}

优势说明 #

• 兼容所有主流浏览器，无语法限制
• 仅需编写一次逻辑，后续不需要针对12个音单独调整
• 不受HTML结构限制，无论按键放在任何层级容器内都可正常生效
• 后续扩展点击高亮、MIDI设备触发高亮等需求可直接在现有逻辑基础上修改

内容的提问来源于stack exchange，提问作者Kevin Bahler