Edge浏览器onmouseover事件突然失效，寻求解决方案

我使用以下代码实现图片悬停切换效果，过去一年运行正常，但近期在Microsoft Edge浏览器中无法工作，Chrome和Firefox仍可正常运行。网站基于Statamic和Tailwind构建，可在测试站点验证问题（仅Edge受影响，站点仍在开发，未适配移动端）。

原实现代码：

<img class="rounded-lg object-cover shadow-lg transition hover:scale-[1.05]"
src="/assets/profiles/leadership/volker-photo-detail-hover.png"
onmouseover="this.src='/assets/profiles/leadership/volker-photo-detail-hover.png';"
onmouseout="this.src='/assets/profiles/leadership/volker-photo-detail.png';">

问题分析 #

原代码存在逻辑冗余：初始src已经设置为悬停状态的图片，onmouseover事件又重复设置相同的src值。Edge近期更新可能对这类无实际变更的DOM操作做了优化拦截，导致事件未触发预期的切换行为，而Chrome、Firefox未启用该优化，因此不受影响。

解决方案 #

方案1：修正内联事件的逻辑错误

调整初始src为默认图片，确保onmouseover和onmouseout事件触发实际的图片切换：

<img class="rounded-lg object-cover shadow-lg transition hover:scale-[1.05]"
src="/assets/profiles/leadership/volker-photo-detail.png"
onmouseover="this.src='/assets/profiles/leadership/volker-photo-detail-hover.png';"
onmouseout="this.src='/assets/profiles/leadership/volker-photo-detail.png';">

方案2：改用纯CSS实现（推荐）

避免JS事件的兼容性问题，利用Tailwind的样式类实现图片切换，兼容性更稳定：

<div class="rounded-lg object-cover shadow-lg transition hover:scale-[1.05] relative overflow-hidden">
  <!-- 默认图片 -->
  <img 
    src="/assets/profiles/leadership/volker-photo-detail.png" 
    class="w-full h-full object-cover"
    alt="Volker profile">
  <!-- 悬停图片 -->
  <img 
    src="/assets/profiles/leadership/volker-photo-detail-hover.png" 
    class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity hover:opacity-100"
    alt="Volker profile hover">
</div>

方案3：使用事件监听替代内联事件

如果坚持用JS实现，改用addEventListener绑定事件，避免内联事件的潜在兼容性问题：

<img 
  class="rounded-lg object-cover shadow-lg transition hover:scale-[1.05]"
  src="/assets/profiles/leadership/volker-photo-detail.png"
  data-hover="/assets/profiles/leadership/volker-photo-detail-hover.png"
  data-default="/assets/profiles/leadership/volker-photo-detail.png"
  alt="Volker profile">

<script>
const profileImg = document.querySelector('[data-hover]');
if (profileImg) {
  profileImg.addEventListener('mouseover', () => {
    profileImg.src = profileImg.dataset.hover;
  });
  profileImg.addEventListener('mouseout', () => {
    profileImg.src = profileImg.dataset.default;
  });
}
</script>

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