悬停事件 - JavaScript

悬停事件是最常见的 JavaScript 事件之一。当鼠标指针悬停在一个 HTML 元素上时，就会触发悬停事件。悬停事件通常与鼠标指针进入和离开元素时的处理函数一起使用。

监听悬停事件

要监听悬停事件，可以使用 addEventListener 方法。下面是一个示例代码：

const myElement = document.getElementById('my-element');
myElement.addEventListener('mouseover', (event) => {
  console.log('鼠标已经悬停在元素上了');
});

这个代码片段就会在鼠标指针进入 myElement 元素时打印出一条消息。

鼠标进入和离开事件

在大多数情况下，我们希望在鼠标进入和离开元素时执行不同的操作。为此，我们可以使用 mouseover 和 mouseout 事件。

在这两个事件中，鼠标的移动会导致事件的多次触发。如果你只想在鼠标进入或离开元素时触发事件，可以使用 mouseenter 和 mouseleave 事件。这两个事件只会在鼠标进入或离开元素时触发一次。

下面是使用 mouseenter 和 mouseleave 事件的示例代码：

const myElement = document.getElementById('my-element');
myElement.addEventListener('mouseenter', (event) => {
  console.log('鼠标已经进入元素');
});

myElement.addEventListener('mouseleave', (event) => {
  console.log('鼠标已经离开元素');
});

操作悬停元素

当我们处理悬停事件时，通常需要对元素进行一些操作。以下是一些常见的操作：

添加样式

当鼠标悬停在元素上时，我们可能希望为元素添加一个特殊的样式。可以使用 classList 属性来实现这个功能。

myElement.addEventListener('mouseenter', (event) => {
  myElement.classList.add('hover-class');
});

myElement.addEventListener('mouseleave', (event) => {
  myElement.classList.remove('hover-class');
});

在这个示例中，当鼠标进入元素时添加一个名为 hover-class 的样式，当鼠标离开时删除这个样式。

显示/隐藏元素

另一种常见的操作是显示或隐藏元素。可以使用 style 属性来实现这个功能。

const myElement = document.getElementById('my-element');
myElement.style.display = 'none';

myElement.addEventListener('mouseenter', (event) => {
  myElement.style.display = 'block';
});

myElement.addEventListener('mouseleave', (event) => {
  myElement.style.display = 'none';
});

在这个示例中，我们首先将元素的 display 属性设置为 none，以便它在加载时不可见。当鼠标进入元素时，将 display 属性设置为 block，以显示元素。当鼠标离开时，将 display 属性设置为 none，以隐藏元素。

总结

悬停事件是 JavaScript 中最常见的事件之一。我们可以使用 addEventListener 方法来监听悬停事件，并对元素进行各种操作。常见的操作包括添加样式和显示/隐藏元素。要在鼠标进入或离开元素时触发事件，可以使用 mouseenter 和 mouseleave 事件。