如何在鼠标悬停时更改按钮中的图像？

.button {
  background-image: url(default-image.png);
}

.button:hover {
  background-image: url(hover-image.png);
}

var button = document.querySelector('.button');

button.addEventListener('mouseover', function() {
  button.style.backgroundImage = 'url(hover-image.png)';
});

button.addEventListener('mouseout', function() {
  button.style.backgroundImage = 'url(default-image.png)';
});