js 鼠标经过图片时更换背景为相应图片

当鼠标经过图片时，你可以使用JavaScript来更换元素的背景图片。以下是实现的步骤：

1. 获取要更改背景图片的元素和要更换的图片，如下所示：

var element = document.getElementById("yourElementId");
var newImage = "yourNewImageUrl";

其中，`yourElementId`是要更改背景图片的元素的ID，`yourNewImageUrl`是你想要设置为背景图片的图片的URL。

2. 使用`onmouseover`事件监听鼠标经过事件，并在事件发生时更改元素的背景图片，如下所示：

element.onmouseover = function() {
  element.style.backgroundImage = "url('" + newImage + "')";
};

其中，`function()`是一个回调函数，当鼠标经过时会自动执行。`element.style.backgroundImage`用于更改元素的背景图片，`newImage`是鼠标经过时要更换的图片的URL。

3. 使用`onmouseout`事件监听鼠标移出事件，并在事件发生时将元素的背景图片更改回原来的图片，如下所示：

element.onmouseout = function() {
  element.style.backgroundImage = "url('" + originalImage + "')";
};

其中，`originalImage`是元素原来的背景图片的URL。

举个例子，如果你想要当鼠标经过ID为`myImage`的`img`元素时，将它的背景图片更换为`hover_background.jpg`，当鼠标移出时将它的背景图片更换回`background.jpg`，你可以这样写：

var myImage = document.getElementById("myImage");
var originalImage = myImage.style.backgroundImage;

myImage.onmouseover = function() {
  myImage.style.backgroundImage = "url('hover_background.jpg')";
};

myImage.onmouseout = function() {
  myImage.style.backgroundImage = originalImage;
};

需要注意的是，如果元素本身没有设置背景图片，那么在第1步中需要通过`style.backgroundImage`属性设置一个初始的背景图片。