本文介绍如何用纯 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：
