WordPress中Swiper滑块鼠标悬停切换彩色图片功能失效求助

实现方案 #

方案一：优先推荐CSS实现（无需额外JS，性能更稳定）

直接将以下CSS代码添加到WordPress自定义CSS字段或者当前主题的样式表中即可，不需要修改你现有的HTML和JS逻辑：

.aspect-ratio {
  position: relative;
  width: 100%;
}
.aspect-ratio img {
  width: 100%;
  height: auto;
  display: block;
}
/* 彩色图默认隐藏，叠在灰度图上方 */
.aspect-ratio img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.25s ease; /* 可选：添加平滑过渡效果 */
}
/* 悬停时显示彩色图 */
.aspect-ratio:hover img:nth-child(2) {
  opacity: 1;
}

方案二：JS实现（适合需要额外逻辑控制的场景）

在你现有JS代码的末尾追加以下逻辑即可：

// 初始化所有幻灯片默认显示灰度图
$('.swiper-slide .aspect-ratio img:nth-child(2)').hide();
// 绑定悬停切换事件
$('.swiper-slide .aspect-ratio').hover(function() {
  $(this).find('img:first').hide();
  $(this).find('img:last').show();
}, function() {
  $(this).find('img:last').hide();
  $(this).find('img:first').show();
});

两种方案都不会影响你现有的Swiper分页、前后切换功能，幻灯片切换后新展示的图片默认都会显示灰度图，完全符合需求。

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