CSS 在悬停时更改文本 - JavaScript

在 Web 开发中，经常需要利用 CSS 实现在悬停时更改文本。这个效果非常常见，特别是在导航菜单等地方。这篇文章将介绍如何使用 CSS 和 JavaScript 实现在悬停时更改文本。

实现效果

我们的目标是在鼠标悬停在文本上时更改文本内容。具体来说，我们希望在鼠标悬停在文本上时，将文本显示为“Hello, World!”，并在鼠标移开后恢复为原始文本。

代码示例

<p id="text">Hover over me!</p>

#text:hover {
  content: "Hello, World!";
}

在上面的示例中，我们使用了 CSS 的 :hover 伪类选择器。当鼠标悬停在 #text 元素上时，CSS 会将内容更改为“Hello, World!”。

但是，这个方法不能实现文本恢复为原始文本的效果。要实现这个效果，我们需要使用 JavaScript。

<p id="text" onmouseover="changeText()">Hover over me!</p>

function changeText() {
  document.getElementById("text").innerHTML = "Hello, World!";
}

document.getElementById("text").onmouseout = function() {
  document.getElementById("text").innerHTML = "Hover over me!";
};

在上面的示例中，我们添加了一个 onmouseover 属性和一个 JavaScript 函数 changeText()。当鼠标悬停在 #text 元素上时，changeText() 函数会将内容更改为“Hello, World!”。

另外，我们也添加了另一个 JavaScript 函数，在鼠标移出 #text 元素时将文本恢复为原始文本。这个函数被赋值给 onmouseout 属性。

结论

在 Web 开发中，使用 CSS 实现在悬停时更改文本是非常容易的。不过，如果需要实现文本恢复为原始文本的效果，我们需要借助 JavaScript。这篇文章介绍了如何结合使用 CSS 和 JavaScript 实现这个效果。