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

Question

我在上悬式背景色幻灯片上上下滑动时使用了社交功能，我编写了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

错字：使用.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 ai { 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>