jQuery Forum

I am creating a special "hamburger" icon which, when hovered over, changes from transparent with white lines to yellow with black lines.  Because I want the lines to change color when you hover over any portion of the box, I assumed that I would need to use jQuery (or at least javascript) to add a class to the icon-bars.  I am having trouble figuring out how to do this.

First, here is the HTML I'm trying to manipulate:

1.                     <nav role="navigation" class="navbar-default nav-container">
                           <!-- Brand and toggle get grouped for better mobile display -->
                               <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                                   <span class="sr-only">Toggle navigation</span>
                                   <span class="icon-bar"></span>
                                   <span class="icon-bar"></span>
                                   <span class="icon-bar"></span>
                               </button>
                           <!-- Collection of nav links and other content for toggling -->
                           <div id="navbarCollapse" class="collapse navbar-collapse nav-container">
                               <ul class="nav nav-pills nav-justified">
                                   <li class="active"><a href="#">Home</a></li>
                                   <li><a href="#">Services</a></li>
                                   <li><a href="#">Contact Us</a></li>
                               </ul>
                           </div>
                       </nav>

I currently have a function within the $(document).ready function to toggle adding/removing a class that would make the lines black.  In my CSS file, I created a class (blk-icon-bar) which sets the background color to black:

1. .blk-icon-bar {
        background-color:#000;
   }

And here is the JQuery function I'm trying to use:

1.    $(document).ready(function() {
       $(".navbar-toggle").hover(function(e) {
        $(".icon-bar").toggleClass("blk-icon-bar");
       });
      });
   

I added an alert within the hover function to ensure that I was getting into the function and the alert does appear but, none of the lines change color.  What am I doing wrong with this code?  Any and all help would be greatly appreciated.

Chris