title: Hover effects stay on Bootstrap navbar
body: <p>I've got <code>navbar-fixed-top</code>, which changes colors after scrolling, such as a <code>background-color</code>, <code>color</code>, <code>border-color</code>.</p>
  
  <p>There is little script, which doin' it:</p>
  
  <pre><code> $(document).ready(function(){       
     var scroll_start = 0;
     var startchange = $('#home');
     var offset = startchange.offset();
      if (startchange.length){
     $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if(scroll_start &gt; offset.top) {
            $('.navbar').css('background-color', 'white');
            $('.navbar a').css('color', 'black');
            $('.navbar a').hover(function() {
              $(this).css('border-color', 'black')
            });
         }
         else {
            $('.navbar').css('background-color', 'transparent');
            $('.navbar a').css('color', 'white');
            $('.navbar a').hover(function() {
              $(this).css('border-color', 'white')
            });
            $('.navbar a').css('border-color', 'transparent');   
         }
     });
      }
  });
  </code></pre>
  
  <p>But after all that, I've got stayed hover effect. It appears once, if you hold the points of navbar with the mouse, but does not disappear if you remove it.</p>
  
  <p>Here it looks like: <a href="http://i.imgur.com/JHGOfJs.png" rel="nofollow">http://i.imgur.com/JHGOfJs.png</a></p>
  
  <p>Here is <a href="https://jsfiddle.net/DTcHh/12770/" rel="nofollow">JSFiddle.</a> </p>
  
  <p>Border didn't disappear.</p>
  
  <p>How to fix that?</p>