css悬停显示另一张图片

CSS悬停显示另一张图片，是指鼠标在页面上悬停时，会显示一个与原图片不同的图片。

代码如下：HTML部分：<div class="image-container"><img src="original-image.jpg" alt="原图片"><img src="hover-image.jpg" alt="悬停图片" class="hover-image"></div>CSS部分：.image-container {position: relative;display: inline-block;}.hover-image {position: absolute;top: 0;left: 0;opacity: 0;transition: opacity 0.5s;}.image-container:hover .hover-image {opacity: 1;}

其中，原图片和悬停图片都被包含在一个div容器中，使用position属性使容器变成相对定位或绝对定位，使悬停图片脱离文档流，可以在hover时覆盖于原图片之上。使用opacity属性，将悬停图片的透明度设置为0，即完全透明，而hover时将opacity属性设为1，即完全不透明，实现悬停时图片的切换。

通过使用CSS悬停显示另一张图片的方法，可以为图片添加更多的交互性和美观性，增强用户体验。