悬停图像时如何放置GIF？

Posted 2023-03-25

【中文标题】悬停图像时如何放置GIF？

【英文标题】：How to put a GIF when hovering the image?

【发布时间】：2021-03-14 19:43:40

【问题描述】：

大家好，我真的需要你们的帮助。 我是 Web 开发的初学者，最近我开始使用 html、css i js 制作我的第一个网站。我想在页面中心放置 2 张超链接图像（一张在左侧，一张在右侧）。我希望我的 GIF 在我悬停这两个图像时出现（当我悬停在图像上时 GIF 开始，当我取消悬停时结束）。此外，GIF 将具有文本覆盖和其他一些悬停动画。 有什么可以帮助我的吗？ here is the prototype(sketch) 提前致谢，

【问题讨论】：

欢迎来到 Stack Overflow！请考虑分享您的代码并解释什么对您不起作用，以便其他人可以提供帮助。

【参考方案1】：

如果可以的话！！

你可以用 CSS 本身来做，例如：

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

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

（我不知道如何链接到另一个帖子，因为我是新手，但他们在这里谈论它CSS: Change image src on img:hover）

【参考方案2】：

这是一个可以帮助您实现目标的示例。 也可以在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>

【讨论】：

谢谢大家，我会尽力让你知道的。

不客气，如果你需要什么，我在这里。