html - 为 Bootstrap 导航栏元素添加白色背景

Question

我正在使用 bootstrap 制作个人网站，我有一个透明的导航栏，如下所示:

这样写:

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#home">Jon Snow - Knows    Nothing</a>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="page-scroll">
                <a href="#about">About Me</a>
            </li>
            <li class="page-scroll">
                <a href="#work">Work</a>
            </li>
            <li class="page-scroll">
                <a href="#blog">Blog</a>
            </li>
            <li class="page-scroll">
                <a href="#contact">Contact Me</a>
        </ul>
      </div>
    </div>
 </nav>

这是为桌面和移动网站设置不同配置文件的 CSS 的方式:

 @media only screen
 and (min-width: 768px)  {

.navbar.navbar-default {
     padding:6px;
     background: rgba(0, 0, 0, 0);
     border: none;
 }

 .navbar.navbar-default .navbar-nav > li > a,
 .navbar.navbar-default .navbar-brand {
     color: white;
 }
 .navbar.navbar-default .navbar-collapse {
     border: none;
     box-shadow: none;
  }

}

@media only screen and (max-width: 767px) {
 .navbar.navbar-default {
     background: rgba(0, 0, 0, .5);
     border: none;
}

.icon-bar {
     background-color:#ffffff !important;
}

.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
    color: white;
}
.navbar.navbar-default .navbar-collapse {
    border: none;
    box-shadow: none;
}

我正在尝试在悬停时添加高亮显示并聚焦到我的导航栏元素，它应该看起来像这样:

我尝试了这个的变体，但没有成功:

.nav li > a {
background-color:#000000;
color: #ffffff;
}

这里还有 fiddle :JSFiddle

Answer 1

这可能有用!

.navbar.navbar-default .navbar-nav li a:hover {
background-color:#000000;
color: #ffffff;
border-radius:5px;
}