html 鼠标悬停div改换图片

在HTML中，你可以通过CSS的`:hover`伪类来实现鼠标悬停在一个<div>元素上时更改图片。首先，你需要拥有两个或更多的图片链接，然后将它们分别设置为<div>的不同状态样式。以下是基本步骤：

1. 创建HTML结构，包含一个<img>标签作为默认图像，以及另一个图像的src属性，通常会设置为初始隐藏（例如，`data-image-src`）：

<div class="image-container">
  <img src="default-image.jpg" alt="默认图片" data-image-src="hover-image.jpg">
  <span>悬停查看</span>
</div>

2. 使用CSS添加:hover伪类和一些JavaScript（如果需要动态改变）来切换图片：

.image-container {
  position: relative;
}

.image-container img {
  display: none; /* 初始隐藏 */
}

.image-container:hover img {
  display: block; /* 鼠标悬停时显示 */
}

.image-container:hover img[data-image-src] {
  display: none; /* 当有data-image-src时，隐藏默认图片 */
}

/* 或者使用JavaScript（如jQuery）来切换图片 */
<script>
$(document).ready(function() {
  $('.image-container').hover(
    function() { $(this).find('img').attr('src', $(this).find('img').data('image-src')); },
    function() { $(this).find('img').attr('src', 'default-image.jpg'); }
  );
});
</script>

在这个例子中，当鼠标移到<div>上时，图片会变为数据属性指定的图片；离开时，恢复到默认图片。