Question

我是编码和js的初学者。我一直在寻找一个小项目开始，以便将鼠标悬停时将文本（即“猫”一词）更改为另一段文本（即狗）。请帮忙，让我入门的任何简单方法。

Answer 1

我想您要实现的目标提出了以下两个基本问题：

如何更改元素的文本？
将鼠标悬停在元素上时如何触发此更改？

要回答第一个问题，您可以查看this网页以了解有关基本dom操作的信息。您还可以查看以下代码段，以了解如何将“ cat”的文本永久更改为“ dog”。

var text = document.getElementById('text')
text.textContent = "dog"

<p id="text">
  cat
</p>

要回答第二个问题，您应该阅读有关eventlistener的信息。在这种情况下，您可能想要使用事件mouseover和mouseout。以下代码段将提供如何使用它们的示例：

var text = document.getElementById('text')

text.addEventListener("mouseout", function() {
  text.textContent = "cat"
})

text.addEventListener("mouseover", function() {
  text.textContent = "dog"
})

<p id="text">
  cat
</p>

由于您似乎是新手，所以我也建议您阅读有关window.onload的信息，因为在过早执行var text = document.getElementById('text')之类的代码时可能会遇到麻烦。

此外，您可以查看difference between innerHTML and textContent在评论中提到的Nick Parsons。在这种情况下，使用textContent实际上更清洁，因为我们只想更改文本。

Answer 2

此代码将链接文本更改为“数据更改”中的内容，并在鼠标移出时再次更改。

<a href="#" data-change="Dog" onmouseover="changeMe(this)" onmouseout="changeMe(this)">Cat</a>

<script type="text/javascript">
  function changeMe(el) {
    newText = el.getAttribute('data-change');
    oldText = el.innerText;
    el.setAttribute('data-change', oldText);
    el.innerText = newText;
  }
</script>

测试：https://codepen.io/anon/pen/MzBQod

鼠标悬停时JS文本更改

2 个答案: