title: Switch to glyphicons-white on hover with bootstrap
body: <p>bootstrap states that</p>
  
  <blockquote>
    <p>There are also styles available for inverted (white) icons, made ready
    with one extra class. We will specifically enforce this class on hover
    and active states for nav and dropdown links.</p>
  </blockquote>
  
  <p>this doesn't seems to be working on my navbar (parts omitted for sake of simplicity).
  This is the div chain.   </p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top "&gt;
      &lt;div class="navbar-inner "&gt;
          &lt;div class="container"&gt;
           &lt;div class="nav-collapse collapse "&gt;
             &lt;ul class="nav" &gt;
              &lt;li&gt;&lt;%= link_to content_tag(:i," ", :class=&gt;"icon-envelope")+ " " +"Messages, messages_path %&gt; &lt;/li&gt;
  </code></pre>
  
  <p>the css code from bootstrap is</p>
  
  <pre><code>.icon-white,
  .nav-pills &gt; .active &gt; a &gt; [class^="icon-"],
  .nav-pills &gt; .active &gt; a &gt; [class*=" icon-"],
  .nav-list &gt; .active &gt; a &gt; [class^="icon-"],
  .nav-list &gt; .active &gt; a &gt; [class*=" icon-"],
  .navbar-inverse .nav &gt; .active &gt; a &gt; [class^="icon-"],
  .navbar-inverse .nav &gt; .active &gt; a &gt; [class*=" icon-"],
  .dropdown-menu &gt; li &gt; a:hover &gt; [class^="icon-"],
  .dropdown-menu &gt; li &gt; a:hover &gt; [class*=" icon-"],
  .dropdown-menu &gt; .active &gt; a &gt; [class^="icon-"],
  .dropdown-menu &gt; .active &gt; a &gt; [class*=" icon-"],
  .dropdown-submenu:hover &gt; a &gt; [class^="icon-"],
  .dropdown-submenu:hover &gt; a &gt; [class*=" icon-"] {
    background-image: url(/assets/twitter/bootstrap/glyphicons-halflings-white.png);
  }
  </code></pre>
  
  <p>The switch does happen with this css code</p>
  
  <pre><code>.navbar-inverse .nav  a:hover [class^="icon-"],
  .navbar-inverse .nav a:hover  [class*=" icon-"]{
          background-image: url(&lt;%= asset_path "/assets/twitter/bootstrap/glyphicons-halflings-white.png" %&gt;);
  
  }
  </code></pre>
  
  <p>should I add anything or did I miss anything? Why does my css works but bootstrap's code doesn't?</p>