时间戳

首页 > 解决方案 > 鼠标悬停时JS文本更改

javascript - 鼠标悬停时JS文本更改

问题描述

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

标签： javascripttexthovermouseover

解决方案

我想您要实现的目标会引发以下两个基本问题：

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

要回答您的第一个问题，您可以查看此网页以了解基本的 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')过早。

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

推荐阅读