twitter bootstrap导航栏css

Question

我的导航栏自定义CSS无法正常工作由于某种原因，当您将鼠标悬停在链接上时，它会点亮背景，而不仅仅是链接。 这是它的样子： http : //i.imgur.com/cSa26qK.jpg这是我的CSS代码：

.navbar-cloud {
  background-color: #386474;
  border-color: #284855;
}
.navbar-cloud .navbar-brand {
  color: #c1d9e1;
}
.navbar-cloud .navbar-brand:hover, .navbar-cloud .navbar-brand:focus {
  color: #96becd;
}
.navbar-cloud .navbar-text {
  color: #c1d9e1;
}
.navbar-cloud .navbar-nav > li > a {
  color: #c1d9e1;
}
.navbar-cloud .navbar-nav > li > a:hover, .navbar-cloud .navbar-nav > li > a:focus {
  color: #96becd;
}
.navbar-cloud .navbar-nav > .active > a, .navbar-cloud .navbar-nav > .active > a:hover, .navbar-cloud .navbar-nav > .active > a:focus {
  color: #96becd;
  background-color: #284855;
}
.navbar-cloud .navbar-nav > .open > a, .navbar-cloud .navbar-nav > .open > a:hover, .navbar-cloud .navbar-nav > .open > a:focus {
  color: #96becd;
  background-color: #284855;
}
.navbar-cloud .navbar-toggle {
  border-color: #284855;
}
.navbar-cloud .navbar-toggle:hover, .navbar-cloud .navbar-toggle:focus {
  background-color: #284855;
}
.navbar-cloud .navbar-toggle .icon-bar {
  background-color: #c1d9e1;
}
.navbar-cloud .navbar-collapse,
.navbar-cloud .navbar-form {
  border-color: #c1d9e1;
}
.navbar-cloud .navbar-link {
  color: #c1d9e1;
}
.navbar-cloud .navbar-link:hover {
  color: #96becd;
}

@media (max-width: 767px) {
  .navbar-cloud .navbar-nav .open .dropdown-menu > li > a {
    color: #c1d9e1;
  }
  .navbar-cloud .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-cloud .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #96becd;
  }
  .navbar-cloud .navbar-nav .open .dropdown-menu > .active > a, .navbar-cloud .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-cloud .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #96becd;
    background-color: #284855;
  }
}

Answer 1

演示

.navbar-inverse .navbar-nav>li>a.btn-danger:hover {
    background-color: #d9534f;
    color:#fff;
}

.navbar-inverse .navbar-nav>li>a.btn-success:hover {
    background-color: #5cb85c;
        color:#fff;
}
.navbar-inverse .navbar-nav>li>a.btn-danger {
    color:#000;
}

.navbar-inverse .navbar-nav>li>a.btn-success {
        color:#000;
}

考虑阅读此Button悬停和.btn默认样式

和Twitter引导程序，按钮悬停样式？

Answer 2

您需要通过添加Background: transparent;覆盖默认的引导CSS Background: transparent; 遵循以下CSS规则：

.navbar-cloud .navbar-nav > li > a:hover,
.navbar-cloud .navbar-nav > li > a:focus {
  background: transparent;
  color: #96becd;
}

我创建了一个JSFIDDLE ，在此处显示结果