字体真棒悬停颜色边距变黑答案

【问题标题】：font awesome hover color margin turns black字体真棒悬停颜色边距变黑
【发布时间】：2015-09-14 22:47:06
【问题描述】：

我是一名初学者，在阅读 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：

@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;
}

【问题讨论】：

能否请您提供JSFiddle 来展示您正在体验的效果？

标签： html css ruby-on-rails

【解决方案1】：

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

删除：

.fa:hover {
    color: #BCA9F5;
}

变化：

footer a:hover {
  color: #BCA9F5;
}

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

【讨论】：

感谢您的回复。更改处理了两阶段悬停，但现在它只变成黑色（不是较浅的颜色）。关于为什么会这样的任何想法？
看起来引导程序的 .btn 类导致了这种行为。我编辑了答案以覆盖上面答案中的默认悬停颜色。
谢谢！将两者设置为相同的颜色（包括 .btn 类）解决了它:)

【解决方案2】：

这个 CSS 代码是有问题的，一旦你悬停它，链接就会改变颜色，然后当你到达 fontawesome 图标时，下一个规则被强制执行。

footer a:hover { color: #222; }

【讨论】：