国际站装修鼠标经过换图片代码：悬停切换的实现思路与兼容性注意

问题表现

按要求写了悬停切换，鼠标移上去图片不动。
第一次悬停有明显延迟，后面才流畅。
电脑上效果正常，手机上看永远是第一张图。

原因拆解

失效的首要原因通常是两张图的尺寸不一致。切换时容器高度跳动，视觉上就像没生效。两张图必须完全同尺寸。
第二是层级问题。两张图叠在同一位置时需要正确的堆叠关系，如果都按常规文档流排列，会变成上下两张而不是切换。
第三是图片未预加载。首次悬停要现场请求第二张图，网络延迟造成明显卡顿。
至于手机上不生效，这不是 bug——触屏设备没有真正的悬停状态，属于机制限制。

实操步骤

• 准备两张完全同尺寸的图片，角度差异尽量小，这样切换时视觉跳动最小。
• 把两张图叠放在同一个定位容器内，通过透明度或者显示状态来切换，而不是靠移动位置。
• 给容器绑定悬停状态，改变第二张图的可见性，加上短暂的过渡时间让切换不生硬。
• 为避免首次延迟，可以把两张图合并成一张雪碧图，用背景位置切换，天然预加载。
• 手机端必须有兜底方案：要么并列展示两张图，要么改成点击切换，不能只依赖悬停。