html - Font Awesome 悬停颜色边距变黑

Question

我是一名初学者，在学习 Michael Hartl 的教程时尝试在 Rails 上做一些事情。我试图让我的社交媒体按钮在悬停时改变颜色，但我看到颜色的变化分两个阶段:当指针在 Font Awesome 按钮的“半径”内时，它变成黑色；然后当指针位于按钮本身上方时，它会显示我想要的颜色。如何让按钮在不先变黑的情况下改变颜色？

经过一些搜索，我只找到了关于在悬停时更改 Font Awesome 颜色的帖子，但我没有找到任何与这种黑色半径悬停颜色更改有关的帖子。所有帮助都受到欢迎。

谢谢!

我的页脚 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:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";


/* universal */

body {
  padding-top: 60px;
  background-color: #4B088A;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.center h1 {
  margin-bottom: 10px;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #9400D3;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

/* footer */

footer {
  margin-top: 45px;
  padding: 15px;
  border-top: 1px solid #eaeaea;
  color: #fff;
}

footer a {
  color: #fff;
}

footer a:hover {
  color: #222;
}

footer small {
  text-align: center;
}

footer ul {
  float: right;
  list-style: none;
  font-size: 1.2em
}

footer ul li {
  float: left;
  margin-left: 15px;
}

.gap-right {
  margin-right: 10px; 
}

.fa:hover {
    color: #BCA9F5;
}

Answer 1

您遇到此问题是因为 :hover 属性首先在 .footer a 上定义，然后在 .fa 上定义类，只有当您将鼠标悬停在图标上时才会发生。此外，bootstrap 的 .btn 类会将其悬停样式应用于链接，这就是您获得两阶段悬停行为的原因，因此您也需要覆盖它。

删除:

.fa:hover {
    color: #BCA9F5;
}

改变:

footer a:hover {
  color: #BCA9F5;
}

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