Html 字体悬停颜色边距变为黑色

我是一个初学者，在学习Michael Hartl的教程时尝试rails上的一些东西。我试图让我的社交媒体按钮在悬停时改变颜色，但我看到颜色的变化分为两个阶段：当指针位于字体按钮的“半径”内时，它会变成黑色；然后，当指针正好位于按钮本身上方时，它会显示我想要的颜色。我怎样才能使按钮在不首先变黑的情况下改变颜色

在一些搜索之后，我只找到了关于在悬停时更改字体颜色的帖子，但我没有找到任何关于黑色半径悬停颜色更改的帖子。所有的帮助都很受欢迎

谢谢

我的页脚html，我在其中放置了按钮：

<footer class="footer">
  <nav>
    <ul>
      <li><a href="https://twitter.com/twitteraccount" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter fa-2x"></i></a></li>
      <li><a href="https://www.facebook.com/facebookaccount" class="btn btn-social-icon btn-facebook" target="_blank"><i class="fa fa-facebook fa-2x"></i></a></li>
    </ul>
  </nav>
</footer>

---

这个CSS代码就是问题所在，当你将链接悬停在它上面时，它的颜色就会改变，当你到达fontawesome图标时，下一个规则就会被强制执行

页脚a:悬停{
颜色：#222；
}

您遇到此问题是因为

:hover

属性首先在

.footer a

上定义，然后在

.fa

类上定义，这仅在您将鼠标悬停在图标上时才会发生。此外，bootstrap的

.btn

类将其悬停样式应用于链接，这就是为什么会出现两阶段悬停行为，因此您也需要覆盖它

删除：

.fa:hover {
    color: #BCA9F5;
}

更改：

footer a:hover {
  color: #BCA9F5;
}

footer .btn:hover {
   color: #fff;
}

---

你能提供一个例子来展示你正在经历的效果吗？谢谢你的回复。这一变化考虑了两级悬停，但现在它只会变为黑色（而不是较浅的颜色）。知道为什么吗？看起来是bootstrap的.btn类导致了这种行为。我编辑了答案以覆盖上面答案中的默认悬停颜色。谢谢！将两者设置为相同的颜色（包括.btn类）解决了此问题：）

footer a:hover {
  color: #BCA9F5;
}

footer .btn:hover {
   color: #fff;
}