鼠标悬停产品卡片仅首个卡片d-none类被移除的问题求助

问题根源 #

你遇到的核心问题是事件处理函数中使用了全局选择器（比如document.querySelector），导致每次触发事件时只会选中DOM中第一个匹配.coverGradient和.infoImg的元素，而非当前悬停卡片内的对应元素。

修复代码（基础版） #

假设你的HTML结构如下（可根据实际结构调整父容器类名）：

<!-- 产品卡片容器 -->
<div class="product-card">
  <div class="holderDetailsImg">
    <!-- 卡片可视区域内容 -->
  </div>
  <div class="coverGradient d-none">渐变遮罩</div>
  <div class="infoImg d-none">产品信息</div>
</div>

修改JavaScript逻辑，确保只操作当前悬停卡片内的元素：

// 获取所有.holderDetailsImg元素
document.querySelectorAll('.holderDetailsImg').forEach(imgHolder => {
  // 鼠标移入事件
  imgHolder.addEventListener('mouseover', function() {
    // 找到当前卡片的父容器（核心：限定查找范围）
    const currentCard = this.closest('.product-card');
    // 在当前卡片内移除d-none类
    currentCard.querySelector('.coverGradient').classList.remove('d-none');
    currentCard.querySelector('.infoImg').classList.remove('d-none');
  });

  // 鼠标移出事件
  imgHolder.addEventListener('mouseout', function() {
    const currentCard = this.closest('.product-card');
    currentCard.querySelector('.coverGradient').classList.add('d-none');
    currentCard.querySelector('.infoImg').classList.add('d-none');
  });
});

关键优化点 #

1. 用this指代当前触发事件的元素：确保你操作的是用户实际悬停的那个.holderDetailsImg
2. 用closest()限定查找范围：通过父容器.product-card缩小查找范围，只操作当前卡片内的遮罩和信息元素
3. 避免全局选择器：永远不要在事件处理函数中直接用document.querySelector，除非你确实要操作全局唯一元素

动态卡片场景优化（事件委托） #

如果你的产品卡片是动态生成的（比如通过AJAX加载），上面的绑定方式会失效，推荐使用事件委托，只需要给父容器绑定一次事件：

// 找到所有卡片的最外层父容器
const productsContainer = document.querySelector('.products-container');

// 鼠标移入事件委托
productsContainer.addEventListener('mouseover', function(e) {
  // 找到触发事件的.holderDetailsImg元素
  const targetHolder = e.target.closest('.holderDetailsImg');
  if (!targetHolder) return; // 不是目标元素则终止

  const currentCard = targetHolder.closest('.product-card');
  currentCard.querySelector('.coverGradient').classList.remove('d-none');
  currentCard.querySelector('.infoImg').classList.remove('d-none');
});

// 鼠标移出事件委托
productsContainer.addEventListener('mouseout', function(e) {
  const targetHolder = e.target.closest('.holderDetailsImg');
  if (!targetHolder) return;

  const currentCard = targetHolder.closest('.product-card');
  currentCard.querySelector('.coverGradient').classList.add('d-none');
  currentCard.querySelector('.infoImg').classList.add('d-none');
});

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