Question

当我通过迈克尔哈特的教程学习时，我是初学者在轨道上尝试一些东西。我试图让我的社交媒体按钮在悬停时改变颜色，但我看到两个阶段的颜色变化：当指针在字体真棒按钮的“半径”内时，它变成黑色;然后当指针正好在按钮本身上时，它会显示我想要的颜色。如何在不先变黑的情况下让按钮改变颜色？

经过一些搜索，我只发现了有关在悬停时改变字体颜色的帖子，但我没有发现任何与黑色半径悬停颜色变化相关的内容。所有的帮助都很受欢迎。

谢谢！

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

Answer 2

此CSS代码是问题，链接会在您悬停时更改颜色，然后当您到达fontawesome图标时，将强制执行下一个规则。

footer a:hover { color: #222; }

字体真棒悬停颜色边缘变黑

2 个答案: