使用 JavaScript 更改鼠标悬停时的文本颜色

作者

使用 JavaScript 更改鼠标悬停时的文本颜色

Change Text color on Mouseover using JavaScript

要在鼠标悬停时更改元素的文本颜色：

  1. 向元素添加一个mouseover事件，当用户将鼠标悬停在元素上时更改其文本颜色。
  2. 向元素添加一个mouseout事件，当用户将光标移出时，将其文本颜色更改回默认值。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Apple, Pear, Banana</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

// 👇️ Change text color on mouseover
box.addEventListener('mouseover', function handleMouseOver() {
  box.style.color = 'red';
});

// 👇️ Change text color back on mouseout
box.addEventListener('mouseout', function handleMouseOut() {
  box.style.color = 'black';
});

在鼠标悬停时更改文本颜色

我们使用方法选择了元素document.getElementById()。

然后，我们向该元素添加了一个
鼠标悬停
事件侦听器。

mouseover每当用户的光标移到元素或其子元素之一上时，都会触发该事件。

如果用户将鼠标悬停在元素上，将handleMouseOver调用该函数，我们使用该style对象将元素的文本颜色更改为red。

我们还向

同一元素添加了一个mouseout事件侦听器。

mouseout当用户的光标移出元素或其子元素之一时，将触发该事件。

当用户将光标移出时，我们将元素的文本颜色更改回
black。

您可以使用这种方法在悬停时更改任何元素的文本颜色，它不必是调度事件的元素。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box" style="margin-bottom: 100px; margin-top: 100px">
      Hover over me
    </div>

    <div id="text">Example text content</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

const textDiv = document.getElementById('text');

// 👇️ Change text color on mouseover
box.addEventListener('mouseover', function handleMouseOver() {
  textDiv.style.color = 'red';
});

// 👇️ Change text color back on mouseout
box.addEventListener('mouseout', function handleMouseOut() {
  textDiv.style.color = 'black';
});

当另一个元素悬停时更改文本颜色

如果用户将鼠标悬停在第一个div元素上，第二个元素的文本颜色
div将变为红色。

如果他们将光标移出，颜色将变回black。

–

发表评论