JS 悬停事件 - Javascript

JS 悬停事件是指当鼠标光标在网页上的某个元素上停留时，触发相应的事件。在Javascript中，有两种悬停事件：

• mouseover：当鼠标光标移动到一个元素上方时触发。
• mouseout：当鼠标光标从一个元素上移开时触发。

为什么使用悬停事件？

悬停事件可以帮助我们实现一些交互性的效果，例如：

• 当用户悬停在某个链接上时，显示链接的预览信息。
• 当用户悬停在某个图片上时，显示图片的描述信息。
• 当用户悬停在某个按钮上时，改变按钮的颜色或者其他样式。

如何添加悬停事件？

可以使用Javascript的addEventListener方法来给元素添加悬停事件的监听器。

// 获取元素
const element = document.querySelector('#my-element');

// 添加mouseover监听器
element.addEventListener('mouseover', () => {
  // 这里可以编写处理鼠标悬停的代码
});

// 添加mouseout监听器
element.addEventListener('mouseout', () => {
  // 这里可以编写处理鼠标移开的代码
});

示例代码

下面是一个示例代码，当鼠标悬停在图片上时，图片会被放大，并且图片的标题会出现。

<!-- HTML -->
<img id="my-image" src="my-image.jpg" alt="My Image">
<p id="my-caption">This is my image.</p>

/* CSS */
#my-image {
  width: 200px;
  height: 200px;
  transition: transform 0.3s ease-in-out;
}

#my-image:hover {
  transform: scale(1.2);
}

#my-caption {
  display: none;
}

#my-image:hover + #my-caption {
  display: block;
}

// JS
const image = document.querySelector('#my-image');
const caption = document.querySelector('#my-caption');

image.addEventListener('mouseover', () => {
  caption.style.display = 'block';
});

image.addEventListener('mouseout', () => {
  caption.style.display = 'none';
});

在上面的代码中，我们先使用CSS来实现鼠标悬停时图片放大和标题出现的效果，然后使用Javascript来给图片添加悬停事件的监听器。当鼠标悬停时显示标题，移开时隐藏标题。