使用querySelectorAll为元素添加mouseover事件监听器失败求助

核心误解：onmouseover属性不等于addEventListener绑定的监听器 #

你看到元素原型的onmouseover为null是正常的——addEventListener添加的事件监听器不会同步到元素的onmouseover属性上，这个属性只对应DOM0级事件（比如直接写element.onmouseover = function(){}）。所以不能用这个属性判断监听器是否绑定成功。

实际可能导致“没生效”的原因及解决： #

1. 缺少.hide类的CSS规则

你的CSS里没有定义.hide类的样式，就算事件触发给光标添加了这个类，也看不到任何变化。补充以下CSS：

#cursor.hide > div {
  opacity: 0;
  transform: scale(0.5);
}

2. 确保JS代码在DOM加载完成后执行

如果你的JS代码放在<head>标签里，会在DOM元素渲染前执行，可能导致绑定失败。可以把JS代码放到<body>标签的末尾，或者用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', function() {
  let hideLinks = document.querySelectorAll("[data-hide-cursor]");
  hideLinks.forEach(link => {
    link.addEventListener("mouseover", () => {
      document.getElementById("cursor").classList.add("hide");
    });
    // 建议添加mouseout事件恢复光标状态
    link.addEventListener("mouseout", () => {
      document.getElementById("cursor").classList.remove("hide");
    });
  });
});

3. 验证监听器是否真的生效

可以在事件回调里加console.log测试：

link.addEventListener("mouseover", () => {
  console.log("mouseover触发了！");
  document.getElementById("cursor").classList.add("hide");
});

如果控制台能输出内容，说明监听器已经绑定成功，问题出在样式上。

完整修正后的代码示例 #

<div id="cursor" data-cursor>
  <div></div>
</div>
<button data-hide-cursor type="submit" class="submit-mail">
  Submit
</button>

<style>
#cursor {
  position: fixed; /* 新增：固定定位才能跟随鼠标 */
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
}

#cursor>div {
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background: black;
  transition: transform 0.5s ease, opacity 0.35s ease;
}

#cursor.hide > div {
  opacity: 0;
  transform: scale(0.5);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  let hideLinks = document.querySelectorAll("[data-hide-cursor]");
  hideLinks.forEach(link => {
    link.addEventListener("mouseover", () => {
      document.getElementById("cursor").classList.add("hide");
    });
    link.addEventListener("mouseout", () => {
      document.getElementById("cursor").classList.remove("hide");
    });
  });
});
</script>

额外说明：你的光标元素#cursor缺少position: fixed，默认静态定位下无法跟随鼠标移动，这个也需要补上才能实现预期的光标效果。

内容的提问来源于stack exchange，提问作者Eli-ott