Question

html代码..

       <div>
          <ul class="social-icon">
            <li><a href="#" class="social-facebook"><i class="fa fa-facebook"></i></a</li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="#"><i class="fa fa-rss"></i></a></li>
          </ul>
        </div>

css code ..

.social-icon {
          text-align: center;
          text-decoration: none;
          position: fixed;
        }
        .social-icon li {
          list-style: none;
          display: inline-block;
          float: left;
        }
        .social-icon a {
          display: inline-block;
          font-size: 18px;
          line-height: 38px;
          width: 35px;
          border: 1px solid #f7f7f7;
          border-left: 0;
          text-decoration: none;
        }
        .social-icon a.social-facebook {
          opacity: 0;
          -webkit-transform: scale(2);
          -moz-transform: scale(2);
          -o-transform: scale(2);
          -ms-transform: scale(2);
          transform: scale(2);
          -webkit-transition: all 0.3s ease-in-out 0.2s;
          -moz-transition: all 0.3s ease-in-out 0.2s;
          -o-transition: all 0.3s ease-in-out 0.2s;
          -ms-transition: all 0.3s ease-in-out 0.2s;
          transition: all 0.3s ease-in-out 0.2s;
        }
        .social-icon a.social-facebook:hover {
          background-color: #0e39d8;
          opacity: 1;
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -o-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          -webkit-transition-delay: 0.2s;
          -moz-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          -ms-transition-delay: 0.2s;
          transition-delay: 0.2s;
        }
        .social-icon a:first-child {
          border-left: 1px solid #f7f7f7;
        }
        .social-icon a i {
          color: #d2d2db;
        }

问题在于......我需要一个静态图标和一个悬停图标...我的静态图标不透明度为-0 ..但我想在同一位置显示静态图标，当悬停图标时会向下和向上.......请帮助我......当悬停它的节目时fb图标没有显示。 Here is the jsfiddle link 抱歉我的英语不好。

Answer 1

我通常做的是：创建一个微小的DIV元素，使用CSS（您的图像）为其设置背景。然后在具有不同背景的CSS中创建一个：悬停设置。

Answer 2

为什么设置不透明度0，使图像透明。如果你想看静态图像，你必须设置不透明度不是0而是1才能看到图像。

Answer 3

我不太明白你想要什么但是效果你的varinat认为我的版本会帮助你 DEMO

DEMO 2

DEMO 3

      .social-icon a {
    opacity: 1;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.3s ease-in-out 0.2s;
    -moz-transition: all 0.3s ease-in-out 0.2s;
    -o-transition: all 0.3s ease-in-out 0.2s;
    -ms-transition: all 0.3s ease-in-out 0.2s;
    transition: all 0.3s ease-in-out 0.2s;
}
.social-icon a:hover {
    background-color: #0e39d8;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

Answer 4

您尝试this

我使用CSS3关键帧

完成了它

CSS

.social-icon a:hover {
  -webkit-animation: 0.3s popIn;
  -moz-animation: 0.3s popIn;
   animation: 0.3s popIn;
   background-color: #0e39d8;
   }     
@-webkit-keyframes popIn
{
  0%   {-webkit-transform: scale(1)}  
  50%   {-webkit-transform: scale(2)}
  100% {-webkit-transform: scale(1); background-color: #0e39d8;
          opacity: 1;}
}
@-moz-keyframes popIn
{
  0%   {-moz-transform: scale(1)}
  50%   {-moz-transform: scale(2)}
  100% {-moz-transform: scale(1); background-color: #0e39d8;
          opacity: 1;}
}
@keyframes popIn
{
  0%   {transform: scale(1)}
  50%   {transform: scale(2)}
  100% {transform: scale(1); background-color: #0e39d8;
          opacity: 1;}
}

CSS3悬停在图标元素上

4 个答案: