Search code examples
javascriptjqueryhoverintent

hoverIntent plugin should not disable href


I'm using hoverIntent on a menu bar. After hoverIntent has been called the "a href" tags inside my navigation won't work

$("#primary-nav").find(".dropdown").hoverIntent({
    over: showMM,
    out: hideMM,
    sensitivity: 10,
    timeout: timeOutNumber
});

Is it a normal behavior ? Is it a way to let the href be effective ?


Solution

  • No, this is not normal behavior - here's an example with working links inside the elements targeted by hoverIntent:

    var showMM = function(e) {
      $(e.currentTarget).css("background-color", "green");
    }
    
    var hideMM = function(e) {
      $(e.currentTarget).css("background-color", "");
    }
    
    $("#demo").find(".test").hoverIntent({
      over: showMM,
      out: hideMM,
      sensitivity: 25,
      timeout: 250
    });
    #spacer {
      height: 400px
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
    
    <ul id="demo">
      <li class="test"><a href="#link">Click Me!</a></li>
      <li class="test"><a href="#link">Click Me!</a></li>
      <li class="test"><a href="#link">Click Me!</a></li>
    </ul>
    
    <div id="spacer"></div>
    
    <h2 id="link">Success!</h2>
    
    <div id="spacer"></div>

    Are you sure it's the call to hoverIntent that disables the links, rather than the showMM/hideMM functions? Can you update your question with the code for these functions?