Question

你能告诉我为什么在社交图标附近徘徊会让他们变黑吗？是因为导航按钮吗？可以摆脱这种黑色徘徊，只保持蓝色/红色徘徊？ 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>

Answer 1

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

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

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

Answer 2

您需要覆盖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 个答案: