js鼠标经过变换图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Change on Hover</title>
<style>
  .image-container {
    width: 200px;
    height: 200px;
    background-image: url('image1.jpg');
    background-size: cover;
    transition: background-image 0.3s ease;
  }
</style>
</head>
<body>

<div class="image-container" onmouseover="changeImage(this, 'image2.jpg')" onmouseout="resetImage(this, 'image1.jpg')"></div>

<script>
function changeImage(element, newImageUrl) {
  element.style.backgroundImage = `url(${newImageUrl})`;
}

function resetImage(element, originalImageUrl) {
  element.style.backgroundImage = `url(${originalImageUrl})`;
}
</script>

</body>
</html>