本文讲解如何解决因 svg 图标捕获鼠标事件导致的按钮 hover 动画中断问题，核心方案是为 svg 元素添加 `pointer-events: none`，确保鼠标事件正确穿透至父级按钮容器。
在实现「收缩/展开式按钮」（如初始仅显示箭头图标，悬停后展开并显示文字）时，一个常见却易被忽视的交互 Bug 是：当鼠标从按钮文字区域移向内部 SVG 图标时，动画突然回退——图标瞬间切回原状，文字闪现又消失。这并非代码逻辑错误，而是浏览器事件冒泡与目标元素变更引发的「伪离开（false mouseout）」现象。
根本原因在于：SVG 元素默认具有 pointer-events: auto，会独立捕获鼠标事件。当鼠标从按钮 <button> 的文本或空白区域移动到其子 <svg> 上时，mouseout 事件会先在 <button> 上触发（因为鼠标离开了它的 当前渲染边界），即使视觉上仍在按钮区域内。此时 JS 立即执行还原逻辑（恢复 chevron 图标、显示文字），紧接着 mouseover 又在 <svg> 或 <button> 上触发，造成闪烁与状态错乱。
✅ 正确解法：禁用 SVG 的鼠标事件响应能力，让所有鼠标交互完全由 <button> 统一处理：
#invite-btn button svg {
pointer-events: none;
}该声明确保 SVG 不参与任何鼠标事件捕获，鼠标悬停、移入、移出均只作用于 <button> 元素本身，从而彻底消除因子元素切换导致的事件中断。
? 补充建议与最佳实践：
- 避免频繁操作 innerHTML：当前代码每次 hover 都重写整个 innerHTML，可能引发性能开销与事件监听器丢失（若 SVG 内含动态绑定）。推荐改用 DOM 元素替换或 CSS 切换（如通过 data-state 属性 + :has() 或 JS 控制类名）；
- 优先使用 mouseenter/mouseleave：相比 mouseover/mouseout，前者不冒泡、不触发子元素边界判断，天然规避本问题（但需配合 pointer-events: none 才能保证 SVG 不干扰）；
- 增强可访问性：纯图标按钮应添加 aria-label，且状态切换时建议同步更新 aria-expanded 或 aria-hidden 属性；
- CSS 过渡更平滑：当前仅对 width 和 span 的 display 做过渡，但 display: none → inline 无法过渡。建议改用 opacity + visibility 或 transform: scaleX() 配合 overflow: hidden 实现流畅缩放效果。
综上，pointer-events: none 是解决此类「图标悬停抖动」问题最轻量、最可靠的一行 CSS 方案——它不修改 JS 逻辑，不增加复杂度，直击事件捕获层的本质缺陷。
