温馨提示：这篇文章已超过238天没有更新，请注意相关的内容是否还可用！
按钮换图片是网页开发中常见的功能之一。通过更改按钮的背景图片，可以实现按钮在不同状态下显示不同的图片，从而提升用户体验。
在HTML中，可以使用`<button>`元素来创建按钮。通过设置按钮的`style`属性，可以为按钮指定背景图片。要实现按钮换图片的效果，可以使用JavaScript来动态修改按钮的样式。
我们需要为按钮定义两个不同状态下的背景图片。假设我们有两张图片，分别为`image1.jpg`和`image2.jpg`。我们可以在CSS中定义两个类，分别表示按钮的两种状态。例如，我们可以定义`.btn-normal`类表示按钮的正常状态，`.btn-hover`类表示按钮的鼠标悬停状态。
接下来，我们需要编写JavaScript代码来实现按钮的图片切换效果。我们可以使用`addEventListener`方法来监听按钮的鼠标事件，当鼠标悬停在按钮上时，将按钮的样式切换为`.btn-hover`类，当鼠标离开按钮时，将按钮的样式切换为`.btn-normal`类。
下面是完整的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
width: 100px;
height: 40px;
background-image: url('image1.jpg');
background-size: cover;
border: none;
cursor: pointer;
}
.btn-normal {
background-image: url('image1.jpg');
}
.btn-hover {
background-image: url('image2.jpg');
}
</style>
</head>
<body>
<button class="520b-9198-ea17-f29f btn btn-normal">按钮</button>
<script>
var btn = document.querySelector('.btn');
btn.addEventListener('mouseover', function() {
btn.classList.add('btn-hover');
btn.classList.remove('btn-normal');
});
btn.addEventListener('mouseout', function() {
btn.classList.add('btn-normal');
btn.classList.remove('btn-hover');
});
</script>
</body>
</html>
在上面的示例代码中，我们首先定义了一个`.btn`类，用于设置按钮的基本样式。然后，我们定义了`.btn-normal`和`.btn-hover`类，分别用于设置按钮在正常状态和鼠标悬停状态下的样式。通过JavaScript代码，我们为按钮添加了鼠标悬停和鼠标离开事件的监听器，当鼠标悬停在按钮上时，将按钮的样式切换为`.btn-hover`类，当鼠标离开按钮时，将按钮的样式切换为`.btn-normal`类。
除了使用CSS和JavaScript来实现按钮换图片的效果，还可以使用CSS3的`transition`属性来实现平滑的过渡效果。通过设置`transition`属性，可以让按钮在切换图片时有一个渐变的动画效果。例如，我们可以在`.btn`类中添加`transition: background-image 0.5s ease;`来设置按钮的背景图片切换动画。
总结一下，按钮换图片是通过修改按钮的样式来实现的。我们可以使用CSS来定义按钮的不同状态下的样式，然后使用JavaScript来监听鼠标事件，根据事件的发生改变按钮的样式，从而实现按钮换图片的效果。还可以使用CSS3的`transition`属性来实现平滑的过渡动画效果。
