如何使用外部JS实现鼠标悬停时切换复选框标签背景图片？

1. 调整HTML结构 #

先把label里的文字替换为图片元素，通过data-*属性存储不同状态的图片路径，方便JS调用：

<fieldset id="box">
  <legend>choices</legend>
  <ul id="container">
    <li id="ch1">
      <input id="check1" type="checkbox" />
      <label class="cb" for="check1">
        <img class="cb-img" data-normal="normal1.png" data-hover="hover1.png" src="normal1.png" alt="选项1">
      </label>
    </li>
    <li id="ch2">
      <input id="check2" type="checkbox" />
      <label class="cb" for="check2">
        <img class="cb-img" data-normal="normal2.png" data-hover="hover2.png" src="normal2.png" alt="选项2">
      </label>
    </li>
    <li id="ch3">
      <input id="check3" type="checkbox" />
      <label class="cb" for="check3">
        <img class="cb-img" data-normal="normal3.png" data-hover="hover3.png" src="normal3.png" alt="选项3">
      </label>
    </li>
  </ul>
</fieldset>

2. 编写外部JavaScript代码 #

创建外部JS文件（比如checkbox-hover.js），在HTML的</body>标签前引入。通过监听鼠标事件切换图片：

// 获取所有复选框对应的图片元素
const cbImgs = document.querySelectorAll('.cb-img');

// 为每个图片绑定悬停/离开事件
cbImgs.forEach(img => {
  // 鼠标悬停时切换到hover状态图片
  img.addEventListener('mouseover', function() {
    this.src = this.dataset.hover;
  });

  // 鼠标离开时切回正常状态图片
  img.addEventListener('mouseout', function() {
    this.src = this.dataset.normal;
  });
});

3. 可选：隐藏原生复选框 #

如果要完全用图片替代原生复选框的视觉显示，添加以下CSS：

#container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 优化点击区域，让图片更易点击 */
.cb {
  display: inline-block;
  cursor: pointer;
}

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