title: Prevent jQuery hover event at specific media query
body: <p>I've the following working example showing a basic menu/nav system that uses at hover event for screen widths greater than 480px and and click/expand event for widths less than 480px:</p>
  
  <p><a href="http://novicecoder.co.uk/priestley/" rel="nofollow">my website</a></p>
  
  <p>If you reduce the screen size down from greater than 480px you'll see I'm not getting the desired effect, both the hover and click events are being triggered. </p>
  
  <p>I'm new to jQuery so any help on how to prevent this would be great!!!!</p>
  
  <p>My code up to now:</p>
  
  <pre><code>var next_move = "show";
  
  $(document).ready(function () {
  
      $("#show-investment-type-nav").click(function() {
  
          if (Modernizr.mq('screen and (max-width: 480px)')) {
              $('#sub-menu').slideToggle(100);
              if (next_move === "show") {
                  $("body").addClass("nav-active");
                  $("#site-nav #icon").empty().html("&amp;#59236;");
                  $("#site-nav #nav-margin-down").animate({"margin-top": "163"}, 100);
                  next_move = "hide";
              } else {
                  $("body").removeClass("nav-active");
                  $("#site-nav #icon").empty().html("&amp;#59238;");
                  $("#site-nav #nav-margin-down").animate({"margin-top": "0"}, 100);
                  next_move = "show";
              }
          }
      });
  
      function doneResizing() {
          if (Modernizr.mq('screen and (min-width: 481px)')) {
  
              // Hide submenu
              $("#sub-menu").hide();
  
               // Reset margin for li tags if screen expanded whilst nav open
              $("#site-nav #nav-margin-down").css("margin-top","0");
  
              $("#show-investment-type-nav").hover(function() {
                  $(this).find("#sub-menu").stop(true, true).slideDown("fast");
              }, function () {
                  $(this).find("#sub-menu").stop(true, true).fadeOut("fast");
              });
          } else if (Modernizr.mq('screen and (max-width: 480px)')) {
              $("#sub-menu").hide();  
              next_move = "show";
          }
      }
  
      var id;
      $(window).resize(function () {
          clearTimeout(id);
          id = setTimeout(doneResizing, 0);
      });
  
      doneResizing();
  });
  </code></pre>