JS 鼠标经过事件|极客笔记

JS 鼠标经过事件

在网页开发中，经常需要借助 JavaScript 来实现一些交互效果，其中鼠标经过事件是常见的一种交互效果。当用户将鼠标悬停在某个元素上时，我们可以通过 JavaScript 实现一些特定的动作，比如改变元素样式、显示隐藏内容等。

本文将详细介绍鼠标经过事件的相关知识，并通过示例代码演示如何在网页中实现鼠标经过事件。

1. 鼠标经过事件概述

鼠标经过事件是指当用户将鼠标悬停在某个元素上时触发的事件，通常分为两种：onmouseover 和 onmouseenter。这两种事件有一些差别，下面对它们进行简要介绍：

onmouseover：当鼠标悬停在某个元素上时，如果鼠标移入该元素或移出其子元素，都会触发 onmouseover 事件。
onmouseenter：当鼠标悬停在某个元素上时，只有在鼠标移入该元素时才会触发 onmouseenter 事件，移出其子元素不会触发该事件。

在实际开发中，根据具体需求选择合适的鼠标经过事件，并结合其他 JavaScript 操作实现更丰富的交互效果。

2. 示例代码演示

下面通过几个实际的示例代码演示如何在网页中实现鼠标经过事件。

示例一：改变元素样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标经过事件示例</title>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
  }
</style>
</head>
<body>

<div id="box"></div>

<script>
const box = document.getElementById('box');

box.onmouseenter = function() {
  this.style.backgroundColor = 'skyblue';
};

box.onmouseleave = function() {
  this.style.backgroundColor = '#f0f0f0';
};
</script>

</body>
</html>

在上面的示例中，当鼠标悬停在 #box 元素上时，元素的背景颜色会变为天蓝色，移出时恢复原来的灰色。

示例二：显示隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标经过事件示例</title>
<style>
  #tip {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px;
  }
</style>
</head>
<body>

<div id="button">鼠标移入显示提示</div>
<div id="tip">这是一个提示信息</div>

<script>
const button = document.getElementById('button');
const tip = document.getElementById('tip');

button.onmouseenter = function() {
  tip.style.display = 'block';
};

button.onmouseleave = function() {
  tip.style.display = 'none';
};
</script>

</body>
</html>

在上面的示例中，当鼠标悬停在 #button 元素上时，#tip 元素会显示出来，移出时隐藏。