Switch to glyphicons-white on hover with bootstrap

Question

bootstrap states that

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.

this doesn't seems to be working on my navbar (parts omitted for sake of simplicity). This is the div chain.

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

the css code from bootstrap is

.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);
}

The switch does happen with this css code

.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" %>);

}

should I add anything or did I miss anything? Why does my css works but bootstrap's code doesn't?

Solution 1

If you only have to add one class to your image with bootstrap, I'd suggest you to use jQuery to add the class on hover and remove to class on mouseOut. How? Here's a good way :

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

In this case, the first function is what happen on the mouseover and the second when the hover state is not true anymore! Hope it helped!

Solution 2

You can do this in a simpler way with only css.

<style>
#my-button:hover {
  background-color: #0000ff;
}
#my-button:hover span {
  color: #ffffff;
}
</style>

<button id="my-button">
    <span class="glyphicon glyphicon-pencil"></span>
</button>

Solution 3

Add one class with different color icons

.icon-teal {background-image: url("../images/icons/glyphicons-halflings-teal.png") !important;}

Then use jQuery to toggle Class

$("div.row_action a").hover(
   function () {
    $(this).toggleClass('icon-teal');
   }, 
  function () {
     $(this).toggleClass('icon-teal');
   }
 );