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悬停显示另一张图片的方法,可以为图片添加更多的交互性和美观性,增强用户体验。