Question

正如标题所说的那样，当我将鼠标悬停在特定按钮上时，我试图使用Twitter Bootstrap使用不同颜色的Navbar。这是我的index.html代码段：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Frank does...</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>  
</nav>

目标是让导航栏上的不同按钮（第1页，第2页等）具有不同的颜色。但是，我不知道该怎么做。我尝试将<Div>放在li元素上，例如：

<div class="home"><li><a href="#">Home</a></li></div>

但是它会以某种方式弄乱导航栏的结构，弄乱导航栏并使主页按钮位于导航栏上方。

我如何才能使每个li元素都有自己的hover颜色？

此外，这是我的CSS代码，将悬停颜色更改为红色，但只有红色。

.navbar-inverse .navbar-collapse li a:hover,
.navbar-inverse .navbar-collapse li a:focus{
    background-color:red;
}

Answer 1

您可以使用Pseudo Classes：请参阅CSS Pseudo-classes。

.navbar-inverse .navbar-nav li:first-child:hover {
  background-color: green;
}
.navbar-inverse .navbar-nav li:nth-child(2):hover {
  background-color: lightblue;
}
.navbar-inverse .navbar-nav li:nth-child(3):hover {
  background-color: teal;
}
.navbar-inverse .navbar-nav li:nth-child(4):hover {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Frank does...</a>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Page 1</a>

        </li>
        <li><a href="#">Page 2</a>

        </li>
        <li><a href="#">Page 3</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

将鼠标悬停在Bootstrap导航栏中的按钮上的不同颜色

1 个答案: