Javascript 当鼠标置于另一图像上时，该图像将更改为另一图像

我试着当鼠标悬停在图像上时，这个图像会变成另一个图像。 为什么不工作

var img1=document.getElementById（“img1”）；
函数cambiaImagen（）{
img1.style.backgroundImage=“url（'demo1.jpg'）”；
}
img1.addEventListener（“OnMouseCenter”，cambiaImagen，真）

使用
addEventListener
时，您应该使用事件
mouseenter
，而不是在MouseCenter上使用

var img1 = document.getElementById("img1");
var origSrc=img1.src;
function cambiaImagen(){
   img1.src = "demo1.jpg";
}

img1.addEventListener("mouseenter", cambiaImagen, true);
img1.addEventListener("mouseleave",()=>{img1.src=origSrc},true);

实际上，代码中有两个核心问题：


为了用另一个图像替换当前图像，它足以替换存储在
src
属性中的路径
“
mouseenter
”事件应被调用，而不是“
onmouseenter
”

以下是工作示例：


var img1=document.getElementById（“img1”）；
函数cambiaImagen（）{
img1.src=”https://via.placeholder.com/150/000000/FFFFFF/?text=REPLACEMENT";
}
img1.addEventListener（“mouseenter”，cambiaImagen）

在
cambiaImagen（）
中将
src
设置为“demo1.jpg”而不是背景图像中，仍然无法处理mouseenter事件。然后为
mouseleave
添加另一个事件，该事件将src设置回'demo1p.jpg'位于同一目录中，url是我在JSFIDLE中创建的一个示例：