CSS悬停滑动动画从上到下不起作用

Question

我在使用sociable进行悬停背景颜色从上到下滑动我写了CSS，但我不知道它为什么不起作用。

＆＃13;

＆＃13;

ul.socials {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 20px;
}

.socials li {
  padding: 12px;
}

.socials li.facebook {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}

.socials li.facebok:hover {
  background-position: 0 -100%;
  color: #ffffff;
}

i.fa.fa-facebook {
  color: #3B5998;
}

i.fa.fa-twitter {
  color: #00A0D1;
}

i.fa.fa-dribbble {
  color: #ea4c88;
}

＆＃13;

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
  <ul class="socials">
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

拼写错误：使用.socials li.facebook:hover代替.socials li.facebok:hover

ul.socials {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 20px;
}

.socials li {
  padding: 12px;
}

.socials li.facebook {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}

.socials li.facebook:hover {
  background-position: 0 -100%;
  color: #ffffff;
}

i.fa.fa-facebook {
  color: #3B5998;
}

i.fa.fa-twitter {
  color: #00A0D1;
}

i.fa.fa-dribbble {
  color: #ea4c88;
}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
  <ul class="socials">
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
  </ul>
</div>

Answer 2

以下是供您参考的工作代码。我为所有3个图标制作了滑动效果。

ul.socials {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 20px;
}

.socials li {
  padding: 12px;
}

.socials li.facebook {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}
.socials li.twitter {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #00A0D1 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}
.socials li.dribbble {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #ea4c88 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}
.socials li:hover {
  background-position: 0 -100%;
  color: #ffffff;
}

i.fa.fa-facebook {
  color: #3B5998;
}

i.fa.fa-twitter {
  color: #00A0D1;
}

i.fa.fa-dribbble {
  color: #ea4c88;
}
.socials li:hover a i {
  color: #fff;
}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
  <ul class="socials">
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
  </ul>
</div>