悬停图片切换
悬停图片切换：鼠标移上图片时切成另一张（如商品色样切换、相册预览）。最小实现：容器两张图叠放，:hover 时 opacity 交叉；JS 版可做定时循环切换多张（类似轮播样本）。
进阶：悬停时按 X 轴位置显示不同帧（360° 展示）；或悬停时放大镜局部放大（需 transform-origin 跟随鼠标）。
- 最简版：两张图叠放，:hover opacity 交叉（纯 CSS 即可）
- JS 循环版：悬停计时器逐帧切换多张图
- 放大镜：mousemove 时改 transform-origin 与 scale
HTML
<style> .swap { position: relative; width: 100%; max-width: 340px; margin: 20px auto; height: 190px; border-radius: 12px; overflow: hidden; cursor: pointer; } .swap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; } .swap .top { opacity: 1; } .swap:hover .top { opacity: 0; } .swap .lbl { position: absolute; left: 10px; bottom: 8px; padding: 2px 10px; border-radius: 20px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; } </style> <div class="swap"> <img src="https://picsum.photos/seed/swap1/640/380" alt="默认图"> <img class="top" src="https://picsum.photos/seed/swap2/640/380" alt="悬停图"> <span class="lbl">悬停换图</span> </div> <script> // 纯 CSS 已够用；这里演示“悬停循环切多图”的增强版思路 var box = document.querySelector('.swap'), tops = [1, 2, 3], t = 1, timer = null; box.addEventListener('mouseenter', function () { timer = setInterval(function () { box.querySelector('.top').src = 'https://picsum.photos/seed/swap' + (t++ % 3 + 1) + '/640/380'; }, 900); }); box.addEventListener('mouseleave', function () { clearInterval(timer); box.querySelector('.top').src = 'https://picsum.photos/seed/swap2/640/380'; }); </script>
本节要点悬停换图最简是纯 CSS 双图 opacity 交叉；JS 版可扩展轮播与放大镜。
