如何实现鼠标hover时切换商品模块data-bg对应的背景图

AI 小北

2026-10-13

实现方案

纯CSS方案（推荐）

无需依赖JavaScript，性能最优，可自带平滑过渡效果：

/* 父容器设置相对定位，作为子元素的定位基准 */
.collection-product-image {
  position: relative;
  /* 可根据实际业务调整高度，保留你原有设置即可 */
  height: 320px;
  overflow: hidden;
}

/* 两个背景图容器占满父容器，层叠摆放 */
.collection-product_image {
  position: absolute;
  inset: 0; /* 等价于top:0;left:0;right:0;bottom:0 */
  background-size: cover;
  background-position: center;
  /* 0.3秒淡入淡出过渡，不需要可删除该行 */
  transition: opacity 0.3s ease;
}

/* 默认状态：第一个图显示，第二个图隐藏 */
.collection-product_image.first {
  opacity: 1;
  z-index: 1;
}
.collection-product_image.second {
  opacity: 0;
  z-index: 0;
}

/* hover状态：显隐切换 */
.collection-product-image:hover .first {
  opacity: 0;
  z-index: 0;
}
.collection-product-image:hover .second {
  opacity: 1;
  z-index: 1;
}

JavaScript实现方案

如果有特殊场景需要用脚本控制，提供两种版本可选：

原生JS版本

document.querySelectorAll('.collection-product-image').forEach(container => {
  const firstBg = container.querySelector('.first');
  const secondBg = container.querySelector('.second');
  
  // 鼠标移入切换
  container.addEventListener('mouseenter', () => {
    firstBg.style.opacity = '0';
    secondBg.style.opacity = '1';
  });
  
  // 鼠标移出恢复
  container.addEventListener('mouseleave', () => {
    firstBg.style.opacity = '1';
    secondBg.style.opacity = '0';
  });
});

jQuery版本

$('.collection-product-image').hover(function() {
  $(this).find('.first').css('opacity', '0');
  $(this).find('.second').css('opacity', '1');
}, function() {
  $(this).find('.first').css('opacity', '1');
  $(this).find('.second').css('opacity', '0');
});