鼠标悬停Div切换对应图片功能在Unbounce失效，求替代方案

方案一：纯CSS实现（推荐，无JS依赖） #

Unbounce对原生CSS支持稳定，完全靠CSS伪类和结构选择器实现交互，避免JS加载时机或DOM结构修改的问题。

HTML结构 #

<div class="hover-wrapper">
  <!-- 触发项 -->
  <div class="trigger-card">
    <h3 class="card-title">标题1</h3>
  </div>
  <div class="trigger-card">
    <h3 class="card-title">标题2</h3>
  </div>
  <div class="trigger-card">
    <h3 class="card-title">标题3</h3>
  </div>

  <!-- 图片容器 -->
  <div class="image-set">
    <img src="image1.jpg" class="hover-img active" alt="图1">
    <img src="image2.jpg" class="hover-img" alt="图2">
    <img src="image3.jpg" class="hover-img" alt="图3">
  </div>
</div>

CSS代码 #

/* 初始状态：只显示第一张图片 */
.hover-img {
  display: none;
}
.hover-img.active {
  display: block;
}

/* 触发项基础样式 */
.trigger-card {
  cursor: pointer;
  margin: 12px 0;
  transition: all 0.3s ease;
}
.card-title {
  color: #333;
  transition: color 0.3s ease;
}
/* 悬停时标题变色 */
.trigger-card:hover .card-title {
  color: #e63946;
}

/* 关联触发项与对应图片 */
.trigger-card:nth-child(1):hover ~ .image-set .hover-img:nth-child(1) {
  display: block;
}
.trigger-card:nth-child(1):hover ~ .image-set .hover-img:not(:nth-child(1)) {
  display: none;
}

.trigger-card:nth-child(2):hover ~ .image-set .hover-img:nth-child(2) {
  display: block;
}
.trigger-card:nth-child(2):hover ~ .image-set .hover-img:not(:nth-child(2)) {
  display: none;
}

.trigger-card:nth-child(3):hover ~ .image-set .hover-img:nth-child(3) {
  display: block;
}
.trigger-card:nth-child(3):hover ~ .image-set .hover-img:not(:nth-child(3)) {
  display: none;
}

说明：通过:nth-child选择器匹配触发项和图片的索引关系，初始用.active类控制第一张图显示，悬停时自动切换对应图片，同时标题变色，全程无需JS，适配Unbounce环境。

方案二：适配Unbounce的JS实现 #

如果必须用JS，需确保代码在Unbounce页面完全加载后执行，避免动态DOM导致的元素找不到问题。

HTML结构 #

<div class="trigger-group">
  <div class="trigger-item" data-img-index="0">
    <h3 class="item-title">标题1</h3>
  </div>
  <div class="trigger-item" data-img-index="1">
    <h3 class="item-title">标题2</h3>
  </div>
  <div class="trigger-item" data-img-index="2">
    <h3 class="item-title">标题3</h3>
  </div>
</div>

<div class="image-group">
  <img src="image1.jpg" class="target-img" alt="图1">
  <img src="image2.jpg" class="target-img" alt="图2">
  <img src="image3.jpg" class="target-img" alt="图3">
</div>

CSS代码 #

.target-img {
  display: none;
}
/* 初始显示第一张图 */
.target-img:first-child {
  display: block;
}
.item-title {
  color: #333;
  transition: color 0.3s ease;
}
/* 激活态标题变色 */
.trigger-item.active .item-title {
  color: #e63946;
}

JS代码 #

// 监听Unbounce页面加载完成事件（优先用这个）
window.addEventListener('ub.pageLoaded', initHoverEffect);

// 备用：监听原生DOM加载完成
document.addEventListener('DOMContentLoaded', initHoverEffect);

function initHoverEffect() {
  const triggers = document.querySelectorAll('.trigger-item');
  const images = document.querySelectorAll('.target-img');

  // 初始给第一个触发项加激活类
  if (triggers.length > 0) {
    triggers[0].classList.add('active');
  }

  triggers.forEach(trigger => {
    trigger.addEventListener('mouseenter', function() {
      // 移除所有触发项的激活类
      triggers.forEach(t => t.classList.remove('active'));
      // 标记当前触发项为激活态
      this.classList.add('active');

      const imgIndex = parseInt(this.dataset.imgIndex);
      // 隐藏所有图片
      images.forEach(img => img.style.display = 'none');
      // 显示对应索引的图片
      if (images[imgIndex]) {
        images[imgIndex].style.display = 'block';
      }
    });
  });

  // 可选：鼠标离开后恢复初始状态
  // triggers.forEach(trigger => {
  //   trigger.addEventListener('mouseleave', () => {
  //     triggers.forEach(t => t.classList.remove('active'));
  //     triggers[0].classList.add('active');
  //     images.forEach(img => img.style.display = 'none');
  //     images[0].style.display = 'block';
  //   });
  // });
}

说明：用ub.pageLoaded确保代码在Unbounce页面完全渲染后执行，通过data-img-index明确关联触发项和图片，逻辑清晰且容易调试，同时用active类控制标题颜色，符合Unbounce的DOM结构规则。

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