悬停颜色问题[关闭]答案

【问题标题】：Hovering colors issue [closed]悬停颜色问题[关闭]
【发布时间】：2016-02-02 03:43:03
【问题描述】：

你能告诉我为什么悬停在社交图标附近会使它们变黑吗？是因为导航栏按钮吗？可以摆脱这种黑色悬停而只保留蓝色/红色悬停吗？ https://jsfiddle.net/DTcHh/16537/

<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <ul class="nav navbar-nav navbar-right social">
      <li><a href="#"><i class="fa fa-2x fa-facebook hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-twitter hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-instagram hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-pinterest hidden-xs"></i></a></li>
    </ul>
  </div>
</div>
</nav>
</body>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您需要覆盖您的 css 文件中的默认引导样式：

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #777;
}

并删除

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #000;
}

https://jsfiddle.net/DTcHh/16540/

【讨论】：

【解决方案2】：

好的，在使用开发工具检查源代码后，我发现问题出在引导类本身。

例如，如果您在导航栏链接上切换悬停状态，它的直接子级将变为黑色。我们必须覆盖 Bootstrap 的默认行为。

.navbar-default li a:hover > *, .navbar-default li a:focus > * {
  color: #777;
}

【讨论】：