仅用CSS和HTML实现图标悬停切换图片的方案咨询

HTML 结构 #

保持原有的 col-4 和 col-8 布局结构，给每个图标项添加 data-img 属性存储对应图片地址，右侧图片区域用固定 img 标签展示：

<div class="row">
  <!-- 左侧 col-4 区域 -->
  <div class="col-4">
    <div class="icon-item active" data-img="image1.jpg">
      <i class="your-icon-class"></i>
      <p>图标1对应的文本</p>
    </div>
    <div class="icon-item" data-img="image2.jpg">
      <i class="your-icon-class"></i>
      <p>图标2对应的文本</p>
    </div>
    <div class="icon-item" data-img="image3.jpg">
      <i class="your-icon-class"></i>
      <p>图标3对应的文本</p>
    </div>
    <div class="icon-item" data-img="image4.jpg">
      <i class="your-icon-class"></i>
      <p>图标4对应的文本</p>
    </div>
  </div>
  <!-- 右侧 col-8 图片区域 -->
  <div class="col-8">
    <img id="display-img" src="image1.jpg" alt="展示图片">
  </div>
</div>

CSS 样式 #

保留原有格式的基础上，可添加 hover 状态的视觉反馈（可选）：

.icon-item {
  /* 原有样式保留 */
  cursor: pointer;
  margin-bottom: 1rem;
}
.icon-item.active, .icon-item:hover {
  /* 高亮当前选中/hover的项，比如改变背景色或文字颜色 */
  background-color: #f0f0f0;
}
#display-img {
  width: 100%;
  height: auto;
}

JavaScript 逻辑 #

实现页面加载时显示第一张图，hover 图标时切换图片：

// 获取元素
const iconItems = document.querySelectorAll('.icon-item');
const displayImg = document.getElementById('display-img');

// 给每个图标项添加hover事件
iconItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    // 切换图片
    displayImg.src = item.dataset.img;
    // 移除所有active类，给当前项添加active类（可选，用于视觉反馈）
    iconItems.forEach(i => i.classList.remove('active'));
    item.classList.add('active');
  });
});

关键说明 #

1. 无需修改原有布局结构，仅需给图标项添加 data-img 属性和统一类名，右侧图片区域添加固定ID即可。
2. 若需要点击切换而非 hover，可将 mouseover 事件替换为 click 事件。
3. 若原有页面使用框架（如Bootstrap），确保 col-4 和 col-8 的布局类名正确，样式冲突时调整选择器优先级。

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