如何给Font Awesome添加悬停效果？

Question

我有一些社交网站图标是灰色的。当你将鼠标悬停在它们上面时，我希望它们变成它们对应的颜色（Facebook：蓝色，Google+：红色等）。我已经尝试过一些操作，但都没有成功。以下是代码：

  <li style="float:left;">
      <!-- start social bookmarks -->
      <div style="font-size: 32px; color: grey;">
      <i class="icon-facebook-sign" style="margin-left: 0px;"></i>
      <i class="icon-twitter-sign" style="margin-left: -12px;"></i>
      <i class="icon-linkedin-sign" style="margin-left: -12px;"></i>
      <i class="icon-google-plus-sign" style="margin-left: -12px;"></i>
      </div>
      <!-- end social bookmarks -->
    </li>

- user2275855

---

你能发布一下你的CSS代码吗？ - kamalo

相关：https://dev59.com/CmYr5IYBdhLWcg3w-_CU - xeo

Answer 1

你可以使用：

   .icon-facebook-sign:hover{color:lightblue;}
   .icon-twitter-sign:hover{color:yellow}

http://jsbin.com/opeyoy/1/

- DGA

Answer 2

你可以试试这样做：

.icon-facebook-sign:hover
{
  background-color:blue;
}

- Sachin

---

棘手的部分在于它应该是颜色 vs 背景颜色，因为它们实际上是文本。 - Fernker

Answer 3

基于你已经有一个默认颜色，你可以将这三个颜色用于Facebook、Google Plus和Twitter：

  .icon-facebook-sign:hover {
    color: rgba(59, 89, 152, .7);
  }

  .icon-twitter-sign:hover {
    color: rgba(0, 172, 237, .7);
  }

  .icon-google-plus-sign:hover {
    color: rgba(172, 0, 0, .7);
  }

- Bill Kalligas