如何实现仅允许用户选择一张图片并添加hover背景变色效果

架构老林

2026-8-25

实现单选图片选择及Hover背景切换效果

可以通过CSS+JS结合类控制的方式实现需求，相比直接操作内联样式，这种方式更易维护，交互也更流畅。

优化后的HTML结构

直接给img加背景容易被图片遮挡，建议给每个图片套一个容器，让背景色展示更完整：

<div class="footArchBox">
  <div class="arch-item">
    <img class="footarch" src="./assets/flat.svg" alt="扁平足">
  </div>
  <div class="arch-item">
    <img class="footarch" src="./assets/normal.svg" alt="正常足弓">
  </div>
  <div class="arch-item">
    <img class="footarch" src="./assets/high.svg" alt="高足弓">
  </div>
</div>

CSS 实现Hover与选中样式

用CSS原生特性处理状态样式，搭配过渡动画让交互更自然：

.footArchBox {
  /* 可选：给容器添加布局样式，比如横向排列 */
  display: flex;
  gap: 12px;
}

.arch-item {
  padding: 8px;
  background: #DDDDDD;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 4px; /* 可选：添加圆角优化视觉 */
}

/* Hover时的背景变化 */
.arch-item:hover {
  background: #E6C5A3;
}

/* 选中后的背景样式 */
.arch-item.selected {
  background: #F7D8BA;
}

.footarch {
  width: 80px;
  height: auto;
}

JS 实现单选逻辑

通过添加/移除类来管理选中状态，代码简洁且易扩展：

const archItems = document.querySelectorAll('.arch-item');

archItems.forEach(item => {
  item.addEventListener('click', () => {
    // 清除所有项的选中状态
    archItems.forEach(el => el.classList.remove('selected'));
    // 标记当前项为选中
    item.classList.add('selected');
  });
});