html - 如何使图像在悬停 css 上旋转

Question

我想让我的页面页脚上的社交媒体图标在悬停时旋转。我在每个社交媒体图标上放置了标签包装器和单独的标签。在 CSS 上，我使用了“.wrapper”函数，但是当我在 CSS 上执行“.wrapper:hover”时，它无法识别“:hover”部分。

不知道我写错了什么？有人可以帮忙吗。

非常感谢

HTML

        <div class="footer">
        <div id="footer-header">
            <p>Keep Up With Us...</p>
        </div>
        <center><div class="social-wrapper">
            <div id="facebook"><a href="http://www.facebook.com"><img src="Facebook.png" alt="Facebook"></a></div>
            <div id="instagram"><a href="http://www.instagram.com/"><img src="Instagram.png" alt="Instagram"></a></div>
            <div id="twitter"><a href="http://www.twitter.com/"><img src="Twitter.png" alt="Twitter"></a></div>
            <div id="youtube"><a href="http://www.youtube.com/"><img src="Youtube.png" alt="Youtube"></a></div>
        </div></center>
        <div id="tag-branding">
            <img src="tag.png">
        </div>
    </div>

CSS

.footer {padding: 376px 0px 0px 0px;}
#footer-header {text-align: center; font-family: 'Raleway'; font-weight: 500; font-size: 29px; line-height: 0; margin: 0;}
#facebook {display: inline; margin: 0px 5px 0px 0px;}
#instagram {display: inline; margin: 0px 5px 0px 0px;}
#twitter {display: inline; margin: 0px 5px 0px 0px;}
#youtube {display: inline; margin: 0px 5px 0px 0px;}

#tag-branding {
  padding: 99px 50px 0px 0px;
 }
.social-wrapper {border-radius:50%; -webkit-transition: -webkit-transform .8s ease-in-out; -ms-transition: -ms-transform .8s ease-in-out; transition: transform .8s ease-in-out;}
social-wrapper:hover {transform:rotate(360deg); -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg);}

此外，如果您能指出您所做的更改，我们将不胜感激，如果您这样做了，那么我可以为将来学习。

Answer 1

在 social wrapper 类的 CSS 代码中，您只需要在 .social-wrapper:hover 前面加一个句点来阐明它正在修改类 social-wrapper。

这对我有用:

.social-wrapper {
  border-radius:50%; 
  -webkit-transition: -webkit-transform .8s ease-in-out; 
  -ms-transition: -ms-transform .8s ease-in-out; 
  transition: transform .8s ease-in-out;
  display: inline;
}

.social-wrapper:hover {
  transform:rotate(360deg); 
  -ms-transform:rotate(360deg); 
  -webkit-transform:rotate(360deg); 
}

但是，如果您可能希望轮换各个链接，您还需要稍微修改一下代码。因为您将所有标签都包装在 .social-wrapper 类中，所以它会旋转整个图标部分。要解决这个问题，您只需将每个单独的图标包装在 .social-wrapper 类中。