本文介绍如何用纯 css 的 :hover 选择器替代低效的 javascript 单元素绑定，一次性为所有动态生成的 `.event` 元素添加悬停效果，解决仅首个或最后一个元素响应的问题。
你当前的 JavaScript 实现存在根本性局限：document.querySelector(".event") 只返回 DOM 中第一个匹配的元素，因此 addEventListener 仅绑定到首个 .event 容器上——这就是为什么只有 id="event1"（或偶尔因执行时机变为最后一个）生效的原因。即使 PHP 循环渲染了多个
，JavaScript 代码也从未触达其余节点。
更严重的是，手动通过 JS 修改 style.position 和 style.width 属于内联样式操作，不仅破坏 CSS 可维护性，还可能与原有布局逻辑（如 Flex 容器的 align-items: center）产生冲突，导致定位异常或内容溢出。
✅ 正确且推荐的解决方案是：完全交由 CSS 处理悬停交互。:hover 是原生、高性能、作用于所有匹配元素的选择器，无需任何 JavaScript：
.event {
background-color: white;
border-radius: 10px;
width: 50%;
display: flex;
flex-direction: column;
padding-bottom: 10px;
border: 1px solid #848484;
margin-top: 5px;
/* 添加 transition 实现平滑动画（可选但强烈推荐） */
transition: width 0.3s ease, position 0.2s ease;
}
.event:hover {
position: absolute;
width: 28%;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- position: absolute 会将元素脱离文档流，可能导致后续 .event 元素向上塌陷或重叠。若需保持布局稳定性，建议改用 transform: scale() 或 max-width 配合 transition：
.event { width: 50%; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .event:hover { width: 28%; } - 若必须使用 position: absolute，请确保其父容器（.eventsContainers）设置了 position: relative，否则绝对定位将相对于视口而非容器。
- 移除全部相关 JavaScript 代码（document.querySelector, addEventListener, extendEvent），避免冗余逻辑干扰。
总结：对于「为多个同类元素统一添加悬停样式」这一需求，CSS :hover 是语义清晰、性能卓越、零维护成本的标准解法。它天然支持动态渲染内容，无需关心元素数量、ID 或 PHP 循环细节——只要 HTML 中存在 .event 类，样式即刻生效。
