本文讲解如何修复因重复使用 id 导致的悬停事件失效问题，提供纯 css 和现代 javascript 两种专业级解决方案，确保每个卡片都能独立响应鼠标悬停并动态切换阴影颜色。
本文讲解如何修复因重复使用 id 导致的悬停事件失效问题，提供纯 css 和现代 javascript 两种专业级解决方案，确保每个卡片都能独立响应鼠标悬停并动态切换阴影颜色。
在构建多卡片布局（如服务展示、项目画廊或内容摘要区）时，常需为每张卡片添加悬停动效——例如将默认黑色阴影切换为粉色阴影。但若直接复用相同 id 并通过 getElementById() 操作，JavaScript 将始终只作用于文档中第一个匹配元素，导致“仅首张卡片响应”的典型问题。
? 根本原因：ID 必须唯一
HTML 规范严格要求 id 属性值在整个文档内全局唯一。您代码中为所有卡片设置了相同的 id="CardHover"，这不仅违反标准，更使 document.getElementById("CardHover") 始终返回首个元素，后续卡片完全无法被 JS 函数识别。
✅ 推荐方案一：纯 CSS（最简洁、高性能、语义化）
无需 JavaScript，仅用 :hover 伪类即可优雅解决：
.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 结构（移除所有内联事件和重复 ID，改用语义化 class）：
<div class="report">
@@##@@
<div>
<h6>#ServiceDesign #DesignThinking #Ethnography</h6>
<h4>Title One</h4>
<p>Body Copy for first card.</p>
<a href="#card1" class="tertiary">Explore</a>
</div>
</div>
<div class="report">
@@##@@
<div>
<h6>#UIUX #Research #Prototyping</h6>
<h4>Title Two</h4>
<p>Body Copy for second card.</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/1258" title="Yodayo"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680155366412.png" alt="Yodayo" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/1258" title="Yodayo" class="overflowclass">Yodayo</a>
<p class="overflowclass">Yodayo是一款面向动漫爱好者的 AI 绘画、视频和角色聊天平台。</p>
</div>
<a rel="nofollow" href="/ai/1258" title="Yodayo" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<a href="#card2" class="tertiary">Explore</a>
</div>
</div>
✅ 优势：零 JS 依赖、自动绑定到每个实例、支持键盘焦点（配合 :focus-within 可增强可访问性）、CSS 硬件加速渲染更流畅。
✅ 推荐方案二：现代 JavaScript（需动态逻辑时使用）
当阴影颜色需根据数据动态计算（如按卡片类别变色），或需与其他交互联动时，使用事件委托与 querySelectorAll：
// 获取所有卡片元素（推荐使用 class 而非 id）
const cards = document.querySelectorAll('.report');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.boxShadow = '-6px 6px 0px 0px #FF8A88';
});
card.addEventListener('mouseleave', () => {
card.style.boxShadow = '-6px 6px 0px 0px #000';
});
});
⚠️ 注意事项：
- 使用 mouseenter/mouseleave 替代 mouseover/mouseout：前者仅在进入/离开元素边界时触发，后者会在子元素间移动时频繁触发，造成性能浪费；
- 避免内联事件（onmouseover="..."）：破坏 HTML/CSS/JS 关注点分离，难以维护且不利于 SEO 与无障碍；
- 若卡片需点击跳转，请用 标签包裹整个结构，或为 添加 role="link" 和 tabindex="0" 并监听 keydown（Enter/Space），确保键盘用户可用。
? 总结
方案 适用场景 维护性 性能 可访问性 纯 CSS :hover 静态样式切换（如颜色、阴影、透明度） ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐（天然支持焦点状态） JavaScript 事件监听 动态样式、复杂交互动画、第三方集成 ⭐⭐⭐ ⭐⭐⭐ ⭐⭐（需手动增强） 最佳实践建议：优先用 CSS 实现视觉反馈；仅当业务逻辑必须介入时，再选用 JavaScript，并始终遵循语义化 HTML 与渐进增强原则。
