title: JQUERY - MouseEnter/Focus/Hover/Blur
body: <p>Below is the code used to show and hide a footer banner. Everthing is working fine except the MouseOver.</p>
  
  <p>The MouseOver does work (and when triggered it shows a highlight to the area) however the user clicks in the area, the highlight disappears but then when the user exits the area the highlight flashes as its triggered again post click on the exit.</p>
  
  <p>Therefore it appears the mouseenter/mouseleave code is reset after a click in the same area.</p>
  
  <p>How can I prevent the triggering of this event again even after the click? thankyou.</p>
  
  <pre><code>// Hide the Footer
  $(document).on('click','div#fixedPageFooterShown', function() {hideFooterBanner();});
  
  
  // Highlight Footer MouseOver
  $(document).on('mouseenter','div.fixedPageFooterDisplay', function() {
          $('img.bannerBottomMouseOver').show();
      }).on('mouseleave','div.fixedPageFooterDisplay', function () {
          $('img.bannerBottomMouseOver').hide();
  });
  
  
  // Hide Footer Banner Function
  function hideFooterBanner() {
      $('div#fixedPageFooter').fadeOut('fast', function () {
          $('div#fixedPageFooterClosed').fadeIn('fast');
          $('img.bannerBottomMouseOver').fadeOut('fast');
          $('img#footerArrowMin').hide();
          $('img#footerArrowMax').show();
      });
  }
  
  
  // Show Footer Banner Function
  $(document).on('click','div#fixedPageFooterClosed', function() {
      $(this).fadeOut('fast', function () {
          $('div#fixedPageFooter').fadeIn('fast');
          $('img.bannerBottomMouseOver').fadeOut('fast');
          $('img#footerArrowMax').hide();
          $('img#footerArrowMin').show();
      });
  });
  </code></pre>