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

Question

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

Answer 1

这是一个可以帮助您实现目标的示例。您也可以在codepen上查看：https://codepen.io/assar777/pen/jOMbpeP&nbsp;<style>&nbsp; &nbsp; #image{&nbsp; &nbsp; background-image:url('https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg');&nbsp; &nbsp; height:400px;&nbsp; &nbsp; max-width:400px;&nbsp; &nbsp; background-position:center;&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; background-size:cover;&nbsp; &nbsp; }&nbsp; &nbsp; #image:hover{&nbsp; &nbsp; background-image:url('https://media.emailonacid.com/wp-content/uploads/2019/03/2019-GifsInEmail.gif');&nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <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');}