温馨提示×

js怎么实现鼠标经过图片时更换图片

js
小亿
358
2023-08-03 18:54:15
栏目: 编程语言

你可以使用JavaScript中的事件监听器和DOM操作来实现鼠标经过图片时更换图片。

首先,你需要给目标图片元素添加一个事件监听器,监听鼠标经过事件。然后,在事件处理函数中,你可以通过改变目标图片元素的src属性来更换图片。

以下是一个示例代码:

HTML:

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

JavaScript:

var image = document.getElementById("myImage");
// 添加事件监听器
image.addEventListener("mouseover", function() {
// 鼠标经过时更换图片
image.src = "image2.jpg";
});
// 添加事件监听器
image.addEventListener("mouseout", function() {
// 鼠标移出时恢复原始图片
image.src = "image1.jpg";
});

在上面的代码中,当鼠标经过图片时,事件处理函数会将图片的src属性更改为"image2.jpg",当鼠标移出图片时,事件处理函数会将图片的src属性恢复为"image1.jpg"。

0