0

タイトルが示すように、特定のボタンの上にカーソルを置いたときに、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;
}
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 に答える