通过将鼠标悬停在文本中定义单词

Question

我正在尝试创建一个英语教学程序。 我的目标是让学生阅读文本，并通过将鼠标悬停在他们不理解的任何单词上来获得单个单词的定义。

理想情况下，我希望它链接到 Dictionary.com 或类似的东西，这样我就不必为每个单词输入定义。

任何帮助将不胜感激。

我可以使用 Javascript、CSS 或 HTML，但到目前为止我还没有发现任何有用的东西。

Answer 1

这里是一个使用 vanilla JS CSS 和 Axios 请求字典 api 的例子。

请注意 - 这将仅获取单词的第一个定义，可以修改它以通过简单的 for 循环遍历它们来显示所有定义。

async function getDefinition(word) {
  let response = await axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`, {
    headers: {
      "accept": "application/json"
    }
  });
  document.getElementById('def').innerHTML = response.data[0].meanings[0].definitions[0].definition;
}

.hide {
  display: none;
}

.myDIV:hover+.hide {
  display: block;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
<div class="myDIV" id="hover" onMouseOver="getDefinition('dinosaur')">Dinosaur</div>
<div class="hide" id="def"></div>