Question

我使用Font Aewsome作为我的社交图标，使用Bootstrap 3.

我想在底部使用像这样的悬停效果：example

我有一个社交图标列表：

<ul class="social-buttons">
    <li class="youtube"><a href="#" title="Follow us on Youtube"><i class="fa fa-youtube fa-lg"></i></a></li>
    <li class="twitter"><a href="#" title="Follow us on Twitter"><i class="fa fa-twitter fa-lg"></i></a></li>
    <li class="xing"><a href="#" title="Follow us on Xing"><i class="fa fa-xing fa-lg"></i></a></li>
    <li class="rss"><a href="#" title="Check out our RSS"><i class="fa fa-rss fa-lg"></i></a></li>
</ul>

对于我的CSS我有这个：

.social-buttons {
  position: absolute;
  left: 70%;
  top: 6px;
}

.social-buttons li {
  list-style-type: none;
  float: left;
  margin: 9px 9px 9px 9px;
  position: relative;
}

.social-buttons li a {
  padding: 2px 2px 2px 2px;
  display: block;
}

.social-buttons-footer {
  position: relative;
  left: -49px;
}

.social-buttons-footer li {
  list-style-type: none;
  float: left;
  margin: 8px 8px 8px 8px;
}

.social-buttons-footer li a {
  padding: 2px 2px 2px 2px;
  display: block;
}

.fa-youtube, .fa-twitter, .fa-xing, .fa-rss {
  color: #000000;
}
.fa-lg:hover{
  color: #ffffff;
}

.fa-2x{
  color: #000000;
}
.fa-2x:hover{
  color: #ffffff;
}


// Hover Effect ---------------------------------------------------------------------------------------------------------------------------------------------
.youtube a:hover{
  background-color: #db2c2c;
  -webkit-animation: toBottomFromTop 0.3s;
  -moz-animation: toBottomFromTop 0.3s;
  animation: toBottomFromTop 0.3s;
  color: #ffffff;
}

.twitter a:hover{
  background-color: #83d0f5;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.xing a:hover{
  background-color: #a2d123;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.rss a:hover{
  background-color: #fe9c01;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

我在过去的几个小时内搜索过谷歌，我只能找到他们使用精灵或类似内容的例子。我真的不知道该怎么做。我应该在哪里放置悬停时应该交换的图标？我知道如何用精灵来做 - 我使用这个位置。但是我如何在这里使用它？我为youtube悬停尝试了其他的东西：但这看起来像一个大错误！有人可以教我或告诉我在哪里找到一个啧啧？会好的。

Answer 1

我已经构建了您需要的效果here on JsFiddle。

您现在必须添加AwsomeFont项目。

我已将overflow: hidden;添加到父级，并在悬停事件中使用margin: -x px 0 0 0移动了单个元素。

Font Awesome图标悬停效果从上到下

1 个答案: