Javascript CSS3悬停在图标元素上

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>

问题是。。我需要一个静态图标和一个悬停图标。。。我的静态图标不透明度为-0。。但我想在相同的位置显示静态图标，当鼠标悬停时，图标会上下浮动……请帮助我。。。。。将光标悬停在其显示位置时，fb图标未显示。 对不起，我的英语不好。

我通常做的是： 创建一个小DIV元素， 使用CSS为图像设置背景。

---

然后在CSS中使用不同的背景创建：悬停设置。

为什么要将不透明度设置为0，这会使图像具有透明度。

---

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

我不太明白你想要什么，但我认为我的版本会帮助你

你试试看

我已经使用CSS3关键帧完成了

CSS

---

对于这类问题，我建议使用或类似的方法来处理一个真实的场景。@user3841751-这有点难以理解您的目标，也许可以提供一个说明？这就是您想要的？不@KheemaPandey…不透明度为0，比例为2。我想要一个图标的遮罩。你在找吗？我不想使用任何仅图像的图标字体。请查看这个抱歉的兄弟@Alex Wilson我使用缩放方法…这个东西不适合这个效果…就像这样。。上上下下。感谢兄弟的支持……但我不需要看起来像这样。再次感谢您的支持。请看这个。在这里，想写这样的方式，但我是Athothx Bro……有点问题……JAB图标PAR悬停HOGA标签Popin HOGA AUR JAB图标硒鼠标帽Jayeta标签弹出去JayeGA。thanx兄弟thanx a lot你能给我你的fb身份证吗？？

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

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

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