按钮及内部图片hover动画切换问题求助：事件监听设置

核心思路 #

给按钮整体绑定悬停事件，确保鼠标覆盖按钮任意区域（包括内部图片）时都能触发图片切换逻辑；若需单独兼容图片区域的事件，可额外绑定（实际按钮事件已覆盖图片区域，按需选择即可）。

1. HTML结构 #

搭建包含图片和文本的按钮，用data-*属性存储GIF、PNG路径，方便后续JS调用：

<button class="animated-btn">
  <img 
    src="static-icon.png" 
    alt="按钮图标" 
    class="btn-icon"
    data-gif="animated-icon.gif"
    data-png="static-icon.png"
  >
  <span>点击操作</span>
</button>

2. JavaScript实现 #

通过事件监听器完成图片切换：

// 获取按钮和图片元素
const animatedBtn = document.querySelector('.animated-btn');
const btnIcon = animatedBtn.querySelector('.btn-icon');

// 切换为GIF的函数
function showAnimatedIcon() {
  btnIcon.src = btnIcon.dataset.gif;
}

// 切换回PNG的函数
function showStaticIcon() {
  btnIcon.src = btnIcon.dataset.png;
}

// 给按钮绑定悬停事件：覆盖按钮所有区域
animatedBtn.addEventListener('mouseenter', showAnimatedIcon);
animatedBtn.addEventListener('mouseleave', showStaticIcon);

// 可选：给图片单独绑定事件（按钮事件已覆盖此区域，仅特殊场景需要）
btnIcon.addEventListener('mouseenter', showAnimatedIcon);
btnIcon.addEventListener('mouseleave', showStaticIcon);

3. 可选CSS美化 #

给按钮添加基础样式，优化交互体验：

.animated-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background-color: #2563eb;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.animated-btn:hover {
  background-color: #1d4ed8;
}

.btn-icon {
  width: 24px;
  height: 24px;
}

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