Question

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

如何将鼠标悬停在每个按钮上而不是一次将所有按钮激活？

这是我的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;

Answer 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>

使图像依次悬停转换

1 个答案: