如何实现鼠标悬停Checkbox/图片时显示Span内容？

首先纠正核心错误：HTML中id必须唯一，给checkbox、图片、span设置相同id是无效的，会导致DOM选择混乱，这是你之前事件不生效的关键原因之一。

下面提供两种实现思路，按需选择：

方案一：纯CSS实现（无需JS） #

利用CSS的兄弟选择器和:hover伪类，无需编写JavaScript代码，适合简单场景。

结构示例 #

<div class="image-item">
  <input type="checkbox" class="img-checkbox">
  <img src="your-image.jpg" alt="夏日海滩" class="preview-img">
  <span class="img-name">夏日海滩.jpg</span>
</div>

CSS样式 #

/* 初始隐藏span */
.img-name {
  display: none;
  margin-left: 8px;
  color: #666;
}

/* 当checkbox或图片悬停时，显示对应的span */
.img-checkbox:hover + .preview-img + .img-name,
.preview-img:hover + .img-name {
  display: inline-block;
}

说明：通过相邻兄弟选择器(+)，当checkbox或图片被hover时，直接控制紧跟的span显示。如果元素结构不是严格相邻，可以改用通用兄弟选择器(~)。

方案二：JavaScript实现（灵活度更高） #

适合需要复杂交互逻辑的场景，比如动态生成元素、自定义显示动画等。

结构示例 #

<div class="image-item">
  <input type="checkbox" class="img-trigger" data-target="#img-name-1">
  <img src="your-image.jpg" alt="雪山风景" class="img-trigger" data-target="#img-name-1">
  <span id="img-name-1" class="img-name">雪山风景.jpg</span>
</div>

JavaScript代码 #

// 获取所有需要绑定悬停事件的元素
const triggerElements = document.querySelectorAll('.img-trigger');

triggerElements.forEach(el => {
  // 鼠标悬停时显示目标span
  el.addEventListener('mouseover', function() {
    const targetSelector = this.getAttribute('data-target');
    const targetSpan = document.querySelector(targetSelector);
    if (targetSpan) targetSpan.style.display = 'inline-block';
  });

  // 鼠标离开时隐藏目标span
  el.addEventListener('mouseout', function() {
    const targetSelector = this.getAttribute('data-target');
    const targetSpan = document.querySelector(targetSelector);
    if (targetSpan) targetSpan.style.display = 'none';
  });
});

基础样式 #

.img-name {
  display: none;
  margin-left: 8px;
  color: #666;
}

说明：通过data-target属性将checkbox、图片与对应的span关联，事件触发时通过该属性定位目标元素并控制显示状态。

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