HTML 元素的鼠标悬停事件详解及示例代码分享指南大全

频道：互联网 日期： 浏览：5

在 HTML 中，鼠标悬停事件是指当用户将鼠标指针移动到某个 HTML 元素上时触发的事件。这种交互方式能够为网页增添动态效果和更好的用户体验。以下将详细介绍常见的鼠标悬停事件，并提供示例代码。

常见的鼠标悬停相关事件

onmouseover 事件

当鼠标指针移动到元素上时触发该事件。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onmouseover 示例</title>
</head>

<body>
  <div id="myDiv" onmouseover="changeColor(this)" style="width: 200px; height: 200px; background-color: blue;"></div>
  <script>
    function changeColor(element) {
      element.style.backgroundColor = "red";
    }
  </script>
</body>

</html>

在上述代码中，当鼠标悬停在蓝色的 div 元素上时，其背景颜色会变为红色。

onmouseout 事件

当鼠标指针移出元素时触发该事件。

示例代码：

HTML 元素的鼠标悬停事件详解及示例代码分享指南大全

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onmouseout 示例</title>
</head>

<body>
  <div id="myDiv" onmouseover="changeColor(this)" onmouseout="resetColor(this)" style="width: 200px; height: 200px; background-color: blue;"></div>
  <script>
    function changeColor(element) {
      element.style.backgroundColor = "red";
    }
    function resetColor(element) {
      element.style.backgroundColor = "blue";
    }
  </script>
</body>

</html>

此代码中，鼠标悬停时 div 背景颜色变为红色，鼠标移出时又变回蓝色。

onmouseenter 事件

与 onmouseover 类似，当鼠标指针进入元素时触发，但它不会冒泡。这意味着当鼠标进入元素的子元素时，不会再次触发该事件。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onmouseenter 示例</title>
</head>

<body>
  <div id="parentDiv" onmouseenter="showMessage()" style="width: 300px; height: 300px; background-color: lightgray;">
    <div style="width: 100px; height: 100px; background-color: yellow;"></div>
  </div>
  <script>
    function showMessage() {
      alert('鼠标进入了父元素');
    }
  </script>
</body>

</html>

这里当鼠标进入父 div 时会弹出提示框，而进入子 div 时不会再次触发。

onmouseleave 事件

与 onmouseout 类似，当鼠标指针离开元素时触发，且不会冒泡。

示例代码：

HTML 元素的鼠标悬停事件详解及示例代码分享指南大全

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onmouseleave 示例</title>
</head>

<body>
  <div id="parentDiv" onmouseenter="showMessage()" onmouseleave="hideMessage()" style="width: 300px; height: 300px; background-color: lightgray;">
    <div style="width: 100px; height: 100px; background-color: yellow;"></div>
  </div>
  <script>
    function showMessage() {
      alert('鼠标进入了父元素');
    }
    function hideMessage() {
      alert('鼠标离开了父元素');
    }
  </script>
</body>

</html>

当鼠标进入父 div 弹出提示，离开时也会弹出相应提示，且进入和离开子 div 不会重复触发。

使用 JavaScript 绑定事件

除了在 HTML 标签中直接使用事件属性，还可以使用 JavaScript 来绑定事件，这样可以使代码结构更清晰，便于维护。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 绑定鼠标悬停事件示例</title>
</head>

<body>
  <div id="myDiv" style="width: 200px; height: 200px; background-color: blue;"></div>
  <script>
    const divElement = document.getElementById('myDiv');
    divElement.addEventListener('mouseover', function () {
      this.style.backgroundColor = "red";
    });
    divElement.addEventListener('mouseout', function () {
      this.style.backgroundColor = "blue";
    });
  </script>
</body>

</html>

在这个示例中，通过 addEventListener 方法为 div 元素绑定了 mouseover 和 mouseout 事件，实现了与前面类似的效果。

通过合理运用这些鼠标悬停事件，可以为网页创建出丰富多样的交互效果，提升用户体验。