如何使用Tailwind CSS实现鼠标悬停切换图片？

Tailwind可以通过两种常见方式实现悬停切换图片，对应你原来的Vanilla CSS方案，具体如下：

方法1：利用背景图切换（和原方案逻辑一致） #

直接用Tailwind的hover:前缀结合背景类，需要给元素设置固定宽高，确保背景图能正常显示：

<div class="w-64 h-64 bg-[url('/默认图片路径.jpg')] hover:bg-[url('/悬停图片路径.jpg')] bg-cover bg-center"></div>

• bg-[url(...)]：自定义背景图路径，Tailwind支持直接在类中写入URL
• hover:bg-[url(...)]：鼠标悬停时替换背景图
• bg-cover和bg-center：确保背景图适配容器尺寸并居中展示

方法2：使用img标签切换（适合语义化图片场景） #

如果需要用<img>标签而非背景图，可以通过双图叠加+透明度切换实现：

<div class="relative w-64 h-64">
  <img src="/默认图片路径.jpg" alt="默认图" class="w-full h-full object-cover">
  <img src="/悬停图片路径.jpg" alt="悬停图" class="absolute inset-0 w-full h-full object-cover opacity-0 hover:opacity-100 transition-opacity duration-300">
</div>

• 父容器设置relative，让第二张图片可以通过绝对定位覆盖在默认图上方
• 第二张图片默认opacity-0隐藏，鼠标悬停时通过hover:opacity-100显示
• transition-opacity duration-300添加平滑过渡效果，避免切换生硬

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