如何为多个卡片独立实现鼠标悬停阴影效果

胖枫大大_8877

发布时间：2026-06-06 19:06:02

300人浏览过

来源于php中文网

原创

如何为多个卡片独立实现鼠标悬停阴影效果

本文讲解如何正确为多个具有相同结构的卡片元素分别添加 hover 效果，解决因重复使用 id 导致事件仅作用于首个卡片的问题，并推荐使用纯 CSS :hover 实现更高效、可维护的交互。

本文讲解如何正确为多个具有相同结构的卡片元素分别添加 hover 效果，解决因重复使用 `id` 导致事件仅作用于首个卡片的问题，并推荐使用纯 css `:hover` 实现更高效、可维护的交互。

在前端开发中，为一组卡片（如 .report）统一添加悬停效果是常见需求。但初学者常误用 id 属性——例如将所有卡片都设为 id="CardHover"，这违反了 HTML 规范（id 必须全局唯一），导致 document.getElementById() 永远只返回第一个匹配元素，从而造成“只有第一张卡响应 hover”的现象。

✅ 正确做法：优先使用 CSS :hover（推荐）

最简洁、高性能且语义清晰的方案是完全交由 CSS 处理悬停状态，无需 JavaScript：

.report {
  box-shadow: -6px 6px 0px 0px #000;
  transition: box-shadow 0.2s ease; /* 添加平滑过渡效果 */
}

.report:hover {
  box-shadow: -6px 6px 0px 0px #FF8A88;
}

/* 其他样式保持不变 */
.report > img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.report > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px;
}

对应 HTML 只需为每张卡片添加统一的类名（如 class="report"），无需 id 或内联事件：

<div class="report">
  <img src="card1.png" alt="Card 1">
  <div>
    <h6>#ServiceDesign #DesignThinking #Ethnography</h6>
    <h4>Title One</h4>
    <p>Body Copy for first card.</p>
    <a href="#" class="tertiary">Explore</a>
  </div>
</div>

<div class="report">
  <img src="card2.png" alt="Card 2">
  <div>
    <h6>#UXResearch #Prototyping #Testing</h6>
    <h4>Title Two</h4>
    <p>Body Copy for second card.</p>
    <a href="#" class="tertiary">Explore</a>
  </div>
</div>

✅ 优势显著：

零 JS 开销：减少脚本解析与执行负担；
自动作用于每个实例：CSS 选择器天然支持批量匹配；
无障碍友好：:hover 在键盘焦点（如 :focus-within 配合）下也可增强可访问性；
支持过渡动画：配合 transition 实现优雅的阴影渐变。

⚠️ 若必须使用 JavaScript（进阶场景）

当需要动态计算阴影色值、触发动画库或集成分析埋点时，可采用事件委托方式：

// 使用 class 选择器获取全部卡片
document.querySelectorAll('.report').forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.boxShadow = '-6px 6px 0px 0px #FF8A88';
  });
  card.addEventListener('mouseleave', () => {
    card.style.boxShadow = '-6px 6px 0px 0px #000';
  });
});

⚠️ 注意事项：