2

ブートストラップは次のように述べています

反転 (白) アイコン用のスタイルも用意されており、クラスを 1 つ追加して用意されています。このクラスは、ナビゲーション リンクとドロップダウン リンクのホバー状態とアクティブ状態に具体的に適用されます。

これは私のナビゲーションバーでは機能していないようです（簡単にするために一部を省略しています）。これが div チェーンです。 

<div class="navbar navbar-inverse navbar-fixed-top ">
    <div class="navbar-inner ">
        <div class="container">
         <div class="nav-collapse collapse ">
           <ul class="nav" >
            <li><%= link_to content_tag(:i," ", :class=>"icon-envelope")+ " " +"Messages, messages_path %> </li>

ブートストラップのCSSコードは

.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url(/assets/twitter/bootstrap/glyphicons-halflings-white.png);
}

このCSSコードで切り替えが行われます

.navbar-inverse .nav  a:hover [class^="icon-"],
.navbar-inverse .nav a:hover  [class*=" icon-"]{
        background-image: url(<%= asset_path "/assets/twitter/bootstrap/glyphicons-halflings-white.png" %>);

}

何かを追加する必要がありますか、それとも見逃しましたか? css は機能するのに、ブートストラップのコードが機能しないのはなぜですか?

4

3 に答える 3

4

ブートストラップを使用してイメージにクラスを 1 つだけ追加する必要がある場合は、jQuery を使用してホバー時にクラスを追加し、マウスアウト時にクラスに削除することをお勧めします。どのように？ここに良い方法があります：

    $("yourSelector").hover(
       function () {
         $(this).toggleClass('datWhiteClass');
       }, 
      function () {
          $(this).toggleClass('datWhiteClass');
       }
     );

この場合、最初の関数はマウスオーバーで発生し、2 番目の関数はホバー状態が真でなくなったときに発生します。それが役に立ったことを願っています！

于 2012-12-09T14:40:15.063 に答える