鼠标悬停图片后切换
静态图 动态图
HTML代码：
<div class="image-container">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2023/08/07/211336_202824_A1.gif" class="image1" alt="静态图">
<a href="https://getquicker.net/" target="_blank">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2023/08/07/211354_202824_A2.gif" class="image2" alt="动态图">
</a>
</div>
CSS代码：
<style>
.image-container {
position: relative;
width: 200px; /* 根据实际需求设置容器的宽度 */
height: 200px; /* 根据实际需求设置容器的高度 */
}

.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
暂停transition: opacity 0.5s ease; /* 设置过渡属性，渐变时间为0.5秒 */
}


.image-container .image2 {
opacity: 0; /* 初始时隐藏第二张图片 */
}


.image-container:hover .image1 {
opacity: 0; /* 鼠标悬停时，第一张图片渐变消失 */
}


.image-container:hover .image2 {
opacity: 1; /* 鼠标悬停时，第二张图片渐变显示 */
}
</style>