请求实现：基于鼠标悬停位置的jQuery按钮颜色填充效果

原提问内容：您好，能否协助我实现一款特定的jQuery悬停效果？我在网上未找到相关文档。该效果为：鼠标悬停按钮时，从光标位置开始以圆形扩散的方式填充按钮颜色。附慢速GIF示例。

嘿，太棒了！你已经找到这个效果的准确名称——jQuery Ripple（涟漪填充效果），之前找不到确实是因为没摸到正确的关键词，这种情况太常见啦😂

刚好可以给你补充几个实现这个效果的核心要点，方便你打磨自己的Codepen：

• 首先给按钮绑定mouseenter事件，触发时获取鼠标相对于按钮的X、Y坐标
• 动态创建一个圆形的<span>或<div>元素，定位到光标位置，初始宽高设为0、圆角100%，背景用你想要的填充色
• 给这个圆形元素添加CSS过渡或关键帧动画，让它的宽高逐渐放大到能覆盖整个按钮的尺寸，同时可调整透明度让过渡更自然
• 动画结束后，可以把按钮的背景色设为目标颜色，再移除临时圆形元素，或者让它直接保留作为背景（看你想要的最终呈现效果）

期待看到你的Codepen作品！

内容的提问来源于stack exchange，提问作者user9172236