鼠标悬停菜单时为图片移除/添加Class无效问题求助

核心问题 #

你的代码存在两个关键错误导致功能失效：

1. getElementsByClassName 返回集合而非单个元素：该方法返回的是HTMLCollection类数组对象，不能直接调用addEventListener，必须遍历集合或指定单个元素。
2. 未声明变量list：隐式创建全局变量可能引发冲突，且不符合JS语法规范。

单个场景修正代码 #

如果页面中只有一个.gardenBtn元素，直接取集合的第一个元素即可：

<script>
const triggerRed = document.getElementsByClassName('gardenBtn')[0];
const redIMG = document.getElementById('gardenMe');

triggerRed.addEventListener('mouseover', () => {
  redIMG.classList.remove('risoMe');
});

triggerRed.addEventListener('mouseout', () => {
  redIMG.classList.add('risoMe');
});
</script>

如果有多个.gardenBtn，需要遍历绑定事件：

<script>
const triggerRedList = document.getElementsByClassName('gardenBtn');
const redIMG = document.getElementById('gardenMe');

for (const btn of triggerRedList) {
  btn.addEventListener('mouseover', () => redIMG.classList.remove('risoMe'));
  btn.addEventListener('mouseout', () => redIMG.classList.add('risoMe'));
}
</script>

多场景（红/黄/蓝）优化方案 #

为避免重复代码，用配置批量处理三个场景：

<script>
// 配置每个场景的触发类、目标图片ID、切换类名
const sceneConfigs = [
  { triggerClass: 'gardenBtn', targetImgId: 'gardenMe', toggleClass: 'risoMe' },
  { triggerClass: 'yellowBtn', targetImgId: 'yellowMe', toggleClass: 'risoYellow' },
  { triggerClass: 'blueBtn', targetImgId: 'blueMe', toggleClass: 'risoBlue' }
];

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', () => {
  sceneConfigs.forEach(config => {
    const triggers = document.getElementsByClassName(config.triggerClass);
    const targetImg = document.getElementById(config.targetImgId);
    
    if (!targetImg) return; // 图片不存在则跳过
    
    for (const trigger of triggers) {
      trigger.addEventListener('mouseover', () => {
        targetImg.classList.remove(config.toggleClass);
      });
      trigger.addEventListener('mouseout', () => {
        targetImg.classList.add(config.toggleClass);
      });
    }
  });
});
</script>

额外检查项 #

• 确保脚本放在</body>标签前，或用DOMContentLoaded包裹，避免DOM未加载完成就执行代码。
• 确认目标图片gardenMe初始带有risoMe类。
• 检查CSS样式优先级，确保risoMe的样式没有被其他规则覆盖。

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