如何在悬停图像时放置 GIF？

Question

大家好，我真的需要你们的帮助。我是网络开发的初学者，最近我开始使用 html、css 和 js 制作我的第一个网站。我想在页面中央放置 2 张将成为超链接的图像（一张在左侧，一张在右侧）。我希望当我将鼠标悬停在这两个图像上时显示我的 GIF（GIF 在我将鼠标悬停在图像上时开始，在我将鼠标悬停在图像上时结束）。此外，GIF 还会有文本叠加和其他一些悬停动画。有什么可以帮助我的吗？ 这是原型（草图） 提前致谢，

Answer 1

这是一个可以帮助您实现目标的示例。您也可以在codepen上查看：https://codepen.io/assar777/pen/jOMbpeP

 <style>

    #image{

    background-image:url('https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg');

    height:400px;

    max-width:400px;

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    }

    #image:hover{

    background-image:url('https://media.emailonacid.com/wp-content/uploads/2019/03/2019-GifsInEmail.gif');

    }

    </style>

    

    <div id="image"></div>

Answer 2

如果可以的话！！

您可以使用 CSS 本身来做到这一点，例如：

.classeOfMyImage{

 background: url('http://dummyimage.com/100x100/000/fff');

}

.classeOfMyImage:hover {

 background: url('https://media.tenor.com/images/1fe5b893dd6eb6905c4efabb103e6281/tenor.gif');

}