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

Question

我在 sociable 上使用 hover background-color 从上到下滑动我写了 CSS，但我不知道为什么它不起作用。

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

<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 1

这是供您引用的工作代码。我为所有 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>