如何实现鼠标悬停时显示文本？

嘿，我瞅了你的代码，发现几个小细节没处理好，导致悬停显示文本的功能没正常工作，咱们一步步来调整：

首先说HTML里的问题 #

HTML里的ID是唯一标识符，你给所有的翻译文本span都用了id="Answer"，这不符合规范，浏览器只会识别第一个带这个ID的元素。咱们得把ID改成class，比如class="answer"，这样多个元素可以共享同一个类名。

然后是JS里的两个关键问题 #

1. 事件监听的名称错了：用addEventListener的时候，事件名不需要加on前缀，应该写"mouseenter"和"mouseleave"，而不是"onmouseenter"、"onmouseleave"。
2. 函数里的元素选择不对：你的appear和disappear函数里用document.getElementById("answer")，永远只会拿到第一个带这个ID的元素，咱们应该用this来指代当前触发事件的那个span，这样每个元素悬停时只会改变自己的状态。

修复后的完整代码 #

HTML部分

<div id="Nouns">
  <h2 class="Word-title">Nouns</h2>
  <ul id="List-words">
    <li>eachother--<span class="answer">서로</span></li>
    <li>Tongs--<span class="answer">집게</span></li>
    <li>Scissors--<span class="answer">가위</span></li>
    <li>Sentence--<span class="answer">문장</span></li>
    <li>Grammar--<span class="answer">문법</span></li>
    <li>Part--<span class="answer">부분</span></li>
  </ul>
</div>

JS部分

// 页面加载完成后执行，确保元素都已渲染
document.addEventListener('DOMContentLoaded', function() {
  // 默认隐藏所有answer元素
  const answers = document.querySelectorAll(".answer");
  answers.forEach(answer => {
    answer.style.visibility = "hidden";
  });

  // 给每个answer添加事件监听
  answers.forEach(answer => {
    answer.addEventListener("mouseenter", appear);
    answer.addEventListener("mouseleave", disappear);
  });

  // 显示当前悬停的元素
  function appear() {
    this.style.visibility = "visible";
  }

  // 隐藏当前离开的元素
  function disappear() {
    this.style.visibility = "hidden";
  }
});

另外，我还加了DOMContentLoaded事件，确保JS代码在页面所有元素都加载完成后再执行，避免因为元素还没渲染导致选不到的问题。这样改完之后，每个翻译文本就会在鼠标悬停时显示，离开时隐藏啦～

备注：内容来源于stack exchange，提问作者Reg