如何实现鼠标悬停图片时显示data-sentence属性文本？

嘿，我来帮你搞定这个需求！首先先给你捋清楚data-sentence是什么：它属于HTML5的自定义数据属性（data-*），专门用来存储和元素关联的额外信息，不会干扰元素的默认功能，你可以用它存任何你需要的文本、数值之类的内容，后续通过CSS或JavaScript就能读取这些值。

下面给你两种具体的实现方式，分别适合不同的场景：

方法一：纯CSS实现（无需JS，简单快捷） #

这种方式适合不需要复杂交互的场景，直接用CSS伪元素和attr()函数读取data属性的值，实现悬停显示效果。

首先调整你的HTML（如果label里还没加图片，记得补上）：

<li>
  <input id="checkbox_yoda" type="checkbox" name="character" value="light_side">
  <label for="checkbox_yoda" data-sentence="Force is strong in you">
    <img src="yoda-image.jpg" alt="Yoda"> Yoda
  </label>
</li>

然后补充CSS样式：

input[type=checkbox] {
  display: none;
}

/* 给label设置相对定位，让伪元素能基于它定位 */
label[for="checkbox_yoda"] {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 默认隐藏用来显示文本的伪元素 */
label[for="checkbox_yoda"]::after {
  content: attr(data-sentence); /* 直接读取data-sentence的内容作为伪元素文本 */
  position: absolute;
  bottom: -25px; /* 调整这个值控制文本和图片的距离 */
  left: 0;
  width: 100%;
  text-align: center;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0; /* 默认透明不可见 */
  transition: opacity 0.3s ease; /* 添加入场动画 */
  pointer-events: none; /* 避免伪元素干扰鼠标悬停事件 */
}

/* 鼠标悬停label时，显示伪元素 */
label[for="checkbox_yoda"]:hover::after {
  opacity: 1;
}

方法二：JavaScript实现（更灵活，适合复杂场景） #

如果需要把文本放在页面特定位置，或者需要更多交互逻辑（比如点击也显示），用JS实现会更灵活。

首先修改HTML，添加一个用来显示文本的容器：

<li>
  <input id="checkbox_yoda" type="checkbox" name="character" value="light_side">
  <label for="checkbox_yoda" data-sentence="Force is strong in you" class="character-label">
    <img src="yoda-image.jpg" alt="Yoda"> Yoda
  </label>
  <!-- 专门用来显示句子的容器 -->
  <div class="sentence-display"></div>
</li>

然后写基础CSS：

input[type=checkbox] {
  display: none;
}

.character-label {
  cursor: pointer;
}

.sentence-display {
  margin-top: 8px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.8);
  color: white;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 显示文本的类 */
.sentence-display.show {
  opacity: 1;
}

最后写JavaScript逻辑：

// 获取所有带character-label类的标签
const characterLabels = document.querySelectorAll('.character-label');

characterLabels.forEach(label => {
  // 获取对应的文本显示容器
  const displayBox = label.nextElementSibling;

  // 鼠标悬停时显示文本
  label.addEventListener('mouseover', () => {
    // 读取data-sentence的值，两种方式都可以：
    // 方式1：getAttribute兼容所有浏览器
    const sentence = label.getAttribute('data-sentence');
    // 方式2：dataset是HTML5 API，更简洁（data-sentence对应dataset.sentence）
    // const sentence = label.dataset.sentence;
    
    displayBox.textContent = sentence;
    displayBox.classList.add('show');
  });

  // 鼠标离开时隐藏文本
  label.addEventListener('mouseout', () => {
    displayBox.classList.remove('show');
    displayBox.textContent = '';
  });
});

额外提一句：在JS里读取data属性有两种方式，getAttribute('data-sentence')是兼容所有浏览器的写法，label.dataset.sentence是HTML5新增的API，写法更简洁，把data-后面的部分驼峰化就行（比如data-my-text对应dataset.myText）。

内容的提问来源于stack exchange，提问作者J. Query