修复卡片Hover事件异常：解决内部元素触发问题，实现正确状态切换

问题描述 #

现有卡片组件，鼠标悬停时会切换显示状态，但存在异常：当鼠标停留在卡片上并触碰内部子元素时，状态切换事件会持续触发。需要实现的正确交互是：鼠标悬停卡片时完成一次状态切换，移出卡片时恢复初始状态。

问题根源 #

使用mouseover和mouseout事件时，鼠标在卡片内部子元素间移动会反复触发这两个事件——子元素会触发mouseout（判定为离开父容器），再触发mouseover（判定为回到父容器），导致状态频繁切换。此外原代码未做防抖处理，定时器可能叠加执行，进一步加剧状态混乱。

修改方案 #

1. 替换事件类型：将mouseover改为mouseenter，mouseout改为mouseleave。这两个事件仅在鼠标真正进入/离开整个卡片容器时触发，不会受内部子元素影响。
2. 添加防抖逻辑：给每个卡片实例维护一个定时器ID，触发事件时先清除之前的定时器，再设置新定时器，避免重复执行状态切换。
3. （可选）优化样式操作：用类名切换代替直接修改style.display，代码更简洁易维护。

修改后的代码 #

基础修复版本 #

const wr = document.querySelectorAll('.wrapper')

wr.forEach((items) => {
  let timerId = null; // 存储定时器ID用于防抖

  items.addEventListener('mouseenter', () => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      items.children[0].style.display = "none";
      items.children[1].style.display = "none";
      items.children[2].style.display = "block";
    }, 300);
  });

  items.addEventListener('mouseleave', () => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      items.children[0].style.display = "block";
      items.children[1].style.display = "block";
      items.children[2].style.display = "none";
    }, 300);
  });
});

类名优化版本（推荐） #

先在CSS中定义状态类：

.wrapper .hidden {
  display: none;
}
.wrapper .show {
  display: block;
}

再修改JS代码：

const wr = document.querySelectorAll('.wrapper')

wr.forEach((items) => {
  let timerId = null;
  const [child0, child1, child2] = items.children;

  items.addEventListener('mouseenter', () => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      child0.classList.add('hidden');
      child1.classList.add('hidden');
      child2.classList.remove('hidden');
      child2.classList.add('show');
    }, 300);
  });

  items.addEventListener('mouseleave', () => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      child0.classList.remove('hidden');
      child1.classList.remove('hidden');
      child2.classList.add('hidden');
      child2.classList.remove('show');
    }, 300);
  });
});

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