0

所以正如标题所说，我试图让我的导航栏使用 Twitter Bootstrap 在悬停在特定按钮上时具有不同的颜色。这是我的 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;
}
4

1 回答 1

0

您可以为此使用伪类：请参阅CSS 伪类。

.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>

于 2015-10-02T03:27:57.307 回答