本文详细讲解如何为网页按钮实现一个动态波纹悬停效果，包括javascript定位鼠标坐标和css伪元素动画的结合运用。我们将分析现有代码中的潜在问题，如变量声明和事件监听器的正确使用，并提供优化方案，确保波纹效果在鼠标移入和移出时都能平滑过渡，增强用户体验。
1. 理解动态波纹悬停效果的原理
动态波纹悬停效果（Ripple Hover Effect）是一种常见的UI交互设计，它通过在鼠标悬停时，从鼠标指针位置向外扩散一个圆形背景，营造出水波纹般的视觉反馈。这种效果通常结合JavaScript来捕获鼠标位置，并利用CSS伪元素和过渡动画来实现。
其核心原理包括：
- JavaScript捕获鼠标位置： 当鼠标在按钮上方移动时，JavaScript会获取鼠标相对于按钮的精确坐标（X和Y轴），并将这些坐标作为CSS变量传递给CSS。
- CSS伪元素创建波纹： 在按钮内部使用一个::before或::after伪元素作为波纹的载体。这个伪元素被定位为绝对定位，并设置为圆形（border-radius: 50%）。其初始尺寸为零，背景色设置为波纹颜色。
- CSS变量定位波纹中心： 伪元素的top和left属性通过JavaScript传递的CSS变量来动态设置
