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?