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

在社交包装器类的CSS代码中，你只需要在.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类中包装每个单独的图标。

Answer 2

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;}

.social-wrapper img {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 img:hover {transform:rotate(360deg); -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg);}

现在尝试使用上面的css代码，它的工作正常。

对于演示，您可以查看：您可以使用CSS3过渡在悬停时旋转图像。

旋转图片：

样本

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

Answer 3

悬停时css中的Rtate图像

h1 {
  color: #222;
  text-align: center;
  font-size: 40px;
}

h2 {
  color: #222;
  text-align: center;
}

img {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  width: 250px;
  height: 150px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

img:hover {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

<body bgcolor="#333">
  <h1>-webkit-transform: rotate(180deg);</h1>
  <h2>Hover to see the effect</h2>
  <img src="http://www.hdwallpapers.in/walls/lion-wide.jpg">
  <h2>To get it so it works in all web broswers:</h2>
  <h2>Mozilla firefox: -moz-transform: rotate(180deg);
    <br>
  Opera: -o-transform: rotate(180deg);
    <br>
 Internet Explorer: -ms-transform: rotate(180deg);
    <br>
    CSS3: transform: rotate(180deg);</h2>
  <br>
<h2>The animation:</h2>
<h2>CSS3: transition: 0.70s;
  <br>
  Chrome/Safari: -webkit-transition: 0.70s;
  <br>
  Mozilla firefox: -moz-transition: 0.70s;
  <br>
  Internet Explorer: -ms-transition: 0.70s;
  <br>
  Opera: -o-transition: 0.70s;</h2>
  <h2>More pens coming soon</h2>

演示：https://codepen.io/ImageHoverEffects/pen/GfJLg

如何在悬停css

3 个答案: