鼠标悬停时JS文本更改答案

【问题标题】：JS Text change on mouseover鼠标悬停时JS文本更改
【发布时间】：2018-11-27 00:29:25
【问题描述】：

我是编码和 js 的初学者。我一直在寻找一个小项目，将文本（即“猫”一词）更改为悬停时的另一段文本（即狗）？请帮助，任何简单的事情让我开始。

【问题讨论】：

您应该编辑问题以包含您迄今为止尝试过的内容。否则，不可能知道你在哪里遇到了麻烦。另外，请查看how to ask，了解有关创建有效问题的提示。

标签： javascript text hover mouseover

【解决方案1】：

我猜你想要达到的目标会引发以下两个基本问题：

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

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

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

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

要回答您的第二个问题，您应该阅读eventlistener。在这种情况下，您可能希望使用事件mouseover 和mouseout。以下 sn-p 将提供如何使用它们的示例：

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') 之类的行时可能会遇到一些麻烦。

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

【讨论】：

很好的解释。由于 OP 似乎是一个学习者，因此使用 .textContent 而不是 .innerHTML 可能会有用。 .innerHTML 可能会遇到 XSS 的安全问题（如果以其他方式使用），让他们知道 .textContent 可能对他们有利。

【解决方案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

【讨论】：