📌  相关文章
📜  在悬停 js 上更改图像 - Javascript (1)

📅  最后修改于: 2023-12-03 14:51:26.943000             🧑  作者: Mango

在悬停 JS 上更改图像 - Javascript

在网页开发中，有时需要在用户悬停（hover）某个元素时，显示不同的图片。这个操作可以通过 JavaScript 实现。本文将介绍如何使用 JavaScript 在悬停时更改图像。

HTML 代码

首先，需要在 HTML 代码中添加需要更改图片的元素。以下是一个示例：

<img id="myImage" src="image1.jpg">

在这个示例中，我们添加了一个 img 元素，它的 id 属性为 myImage，它的 src 属性为 image1.jpg。这是初始的图片。

JavaScript 代码

接下来，需要编写 JavaScript 代码来实现在悬停时更改图像的功能。

选择元素

首先，需要选择需要更改图片的元素。可以使用 document.getElementById() 方法选择元素。以下是示例代码：

var img = document.getElementById("myImage");

在这个示例中，我们使用 document.getElementById() 方法选择 id 为 myImage 的元素，赋值给变量 img。

监听事件

接下来，需要监听 mouseover 和 mouseout 事件，当用户悬停在元素上时更改图片，当用户离开元素时恢复图片。可以使用 addEventListener() 方法添加事件监听器。以下是示例代码：

img.addEventListener("mouseover", function() {
  img.src = "image2.jpg";
});

img.addEventListener("mouseout", function() {
  img.src = "image1.jpg";
});

在这个示例中，我们使用 addEventListener() 方法添加 mouseover 和 mouseout 事件监听器，当用户悬停在元素上时，将 img 元素的 src 属性更改为 image2.jpg，当用户离开元素时，将 img 元素的 src 属性恢复为 image1.jpg。

完整代码

以下是完整的 HTML 和 JavaScript 代码实现在悬停时更改图像的功能。

<!DOCTYPE html>
<html>
  <head>
    <title>在悬停 JS 上更改图像 - Javascript</title>
  </head>
  <body>
    <img id="myImage" src="image1.jpg">
    <script>
      var img = document.getElementById("myImage");
      img.addEventListener("mouseover", function() {
        img.src = "image2.jpg";
      });
      img.addEventListener("mouseout", function() {
        img.src = "image1.jpg";
      });
    </script>
  </body>
</html>
结论

通过 JavaScript，可以轻松地在用户悬停某个元素时更改图片，为网页增加互动性和美观度。