Kirby环境本地测试时MouseEnter/MouseLeave事件触发所有.main元素的问题排查

看起来你遇到了一个典型的「全局选择器+全局CSS变量」导致的批量样式修改问题，我帮你梳理下根源和解决办法：

问题根源分析 #

你现在的代码之所以会在hover单个.main时触发所有元素变化，主要有两个核心原因：

1. 全局选择器的无差别修改：
   你的JS里提前全局选择了headerDivs = document.querySelectorAll('.container_header > div')（但看你的HTML结构，应该是笔误写成了.container_header，实际目标是.container > div）。这个选择器会匹配页面上所有符合条件的元素，所以每次hover任意一个.main，都会遍历所有这些div修改样式，导致所有.main里的标题区域都跟着变色。
2. 全局CSS变量的污染：
   document.documentElement.style.setProperty('--color-variable', randomColor)是修改了根元素的全局CSS变量，如果其他.main元素的样式也依赖这个变量，那么所有元素都会同步应用这个新颜色，这就造成了「所有元素一起触发」的错觉。

另外，在纯HTML测试时正常，是因为页面只有单个.main元素，全局选择器只会匹配到当前元素的子元素，问题没有暴露；而Kirby循环生成多个.main后，全局选择器的问题就显现出来了。

具体修复步骤 #

1. 将全局选择器改为当前元素的局部选择

把headerDivs的选择范围限制在当前hover的.main内部，不要用全局选择器：

document.addEventListener('DOMContentLoaded', () => {
  const mainElements = document.querySelectorAll('.main');

  const generateLightColor = () => {
    const randomValue = () => Math.floor(Math.random() * 156 + 100);
    return `rgb(${randomValue()}, ${randomValue()}, ${randomValue()})`;
  };

  mainElements.forEach(main => {
    const randomColor = generateLightColor();
    const container = main.querySelector('.container');
    const spans = main.querySelectorAll('span');
    // 关键：只选择当前.main内部的.container下的div
    const headerDivs = main.querySelectorAll('.container > div');

    main.addEventListener('mouseenter', () => {
      container.style.backgroundColor = randomColor;
      // 把全局CSS变量改为当前.main的局部变量，避免污染全局
      main.style.setProperty('--color-variable', randomColor);

      // 只修改当前.main内部的header divs
      headerDivs.forEach(div => {
        div.style.backgroundColor = randomColor;
        div.style.color = 'black';
      });
      container.style.color = 'black';

      spans.forEach(span => {
        span.style.backgroundColor = randomColor;
        span.style.color = 'black';
      });
    });

    main.addEventListener('mouseleave', () => {
      container.style.backgroundColor = 'var(--color-border-dark)';
      // 重置当前.main内部的header divs样式
      headerDivs.forEach(div => {
        div.style.backgroundColor = 'var(--color-border-dark)';
        div.style.color = 'var(--default-text-color)';
      });
      container.style.color = 'var(--default-text-color)';

      spans.forEach(span => {
        span.style.backgroundColor = 'transparent';
        span.style.color = 'inherit';
      });
      // 移除当前.main的局部CSS变量
      main.style.removeProperty('--color-variable');
    });
  });
});

2. 修正选择器笔误（关键）

你的HTML结构中没有.container_header类，JS里的选择器应该对应HTML里的.container > div，这样才能准确匹配到每个.main内部的标题类div。

更优雅的优化方案：用CSS类控制样式 #

尽量避免直接操作元素的style属性，改用CSS类来管理hover状态，代码会更简洁易维护：

1. 先定义CSS类：

/* hover状态样式 */
.main.hovered .container {
  background-color: var(--local-color);
  color: black;
}
.main.hovered .container > div {
  background-color: var(--local-color);
  color: black;
}
.main.hovered span {
  background-color: var(--local-color);
  color: black;
}
/* 默认状态样式 */
.main .container {
  background-color: var(--color-border-dark);
  color: var(--default-text-color);
  transition: all 0.3s ease;
}
.main .container > div {
  background-color: var(--color-border-dark);
  color: var(--default-text-color);
  transition: all 0.3s ease;
}
.main span {
  background-color: transparent;
  color: inherit;
  transition: all 0.3s ease;
}

2. 简化JS代码：

document.addEventListener('DOMContentLoaded', () => {
  const mainElements = document.querySelectorAll('.main');

  const generateLightColor = () => {
    const randomValue = () => Math.floor(Math.random() * 156 + 100);
    return `rgb(${randomValue()}, ${randomValue()}, ${randomValue()})`;
  };

  mainElements.forEach(main => {
    // 提前给每个.main设置局部颜色变量
    main.style.setProperty('--local-color', generateLightColor());

    main.addEventListener('mouseenter', () => {
      main.classList.add('hovered');
    });

    main.addEventListener('mouseleave', () => {
      main.classList.remove('hovered');
    });
  });
});

这种方式把样式逻辑完全交给CSS，JS只负责切换类和设置局部变量，代码更清晰，还能通过CSS过渡添加平滑的动画效果。

备注：内容来源于stack exchange，提问作者Balázs Milánik