使图像在悬停时依次变换答案

【问题标题】：Make images transform in turn on hover使图像在悬停时依次变换
【发布时间】：2018-06-20 16:06:04
【问题描述】：

我有一堆社交媒体按钮，我给了它们一个小的变换和缩放效果。问题是它们在悬停时都会同时变形。

当鼠标悬停在每个单独的按钮上而不是一次全部激活时，如何使这个转换效果激活？

这是我的 HTML：

   <div id="social">

     <a href="https://www.facebook.com/ionut.andrei.92" target="_blank"><img src="img/icons/facebook.svg" alt="Facebook"></a>

     <a href="https://vk.com/id362685172" target="_blank"><img src="img/icons/vk.svg" alt="VKontakte"></a>

     <a href="https://www.instagram.com/ioan_andrei93/" target="_blank"><img src="img/icons/instagram.svg" alt="Instagram"></a>

     <a href="https://twitter.com/IoanAndrei11" target="_blank"><img src="img/icons/twitter.svg" alt="Twitter"></a>

    </div>

</div>

这是我的 CSS：

#social img{
width: 55px;
height: 55px;
position: relative;
left: 1100px;
top: -50px;



#social:hover img{
transform: scale(1.25);
transition: transform .25s ease;

【问题讨论】：

只需将鼠标悬停在其中的每一个上，而不是全部悬停... [阅读您为悬停编写的选择器，您就会明白]

标签： css button transform media social

【解决方案1】：

您需要将悬停样式应用于链接a 标记，而不是直接应用于#social。如果您在#social 上应用它们，它们将应用于整个社交区块，因此也应用于所有图像。

#social a img {
display: inline-block;
transition: transform .25s ease;
}

#social a:hover img {
transform: scale(1.25);
}

<div>
  <div id="social">

     <a href="https://www.facebook.com/ionut.andrei.92" target="_blank"><img src="http://via.placeholder.com/50x50" alt="Facebook"></a>

     <a href="https://vk.com/id362685172" target="_blank"><img src="http://via.placeholder.com/50x50" alt="VKontakte"></a>

     <a href="https://www.instagram.com/ioan_andrei93/" target="_blank"><img src="http://via.placeholder.com/50x50" alt="Instagram"></a>

     <a href="https://twitter.com/IoanAndrei11" target="_blank"><img src="http://via.placeholder.com/50x50" alt="Twitter"></a>

    </div>
</div>

【讨论】：

非常感谢 Aurelien ) 代码现在可以运行并且看起来很棒。