📅 最后修改于: 2023-12-03 15:17:01.644000 🧑 作者: Mango
当用户将鼠标指针停留在网页上某个元素上时，通常会触发一个事件。在Javascript中，我们可以使用这些事件来更改文本、颜色、样式等。在本文中，我们将介绍如何使用Javascript在悬停时更改文本。
首先，我们将创建一个HTML页面，并在其中添加一个文本元素。
<!DOCTYPE html>
<html>
<head>
<title>JS 在悬停时更改文本 - Javascript</title>
</head>
<body>
<h1 id="title">JS 在悬停时更改文本</h1>
</body>
</html>
接下来，我们将编写Javascript代码来更改文本。我们将使用onmouseover和onmouseout事件来确定鼠标指针是否位于文本上方。
const title = document.querySelector("#title");
title.onmouseover = function() {
title.innerHTML = "鼠标悬停 - 更改文本";
}
title.onmouseout = function() {
title.innerHTML = "JS 在悬停时更改文本";
}
在上面的代码中，我们首先选择了id为title的元素，并将其存储在一个变量title中。接下来，我们为title绑定了onmouseover和onmouseout事件的处理程序。
当用户将鼠标指针悬停在title元素上时，onmouseover事件的处理程序将被触发。在这个处理程序中，我们更改了title元素的innerHTML，将其值更改为“鼠标悬停 - 更改文本”。
当鼠标移开title元素时，onmouseout事件的处理程序将被触发。在这个处理程序中，我们将title元素的innerHTML设置回原始值：“JS 在悬停时更改文本”。
现在，我们已经了解了如何使用Javascript在悬停时更改文本。使用onmouseover和onmouseout事件，我们可以轻松地为网页元素添加交互效果，使用户的体验更加丰富。