Search code examples
jquerymouseoverdelaydurationeventtrigger

jQuery activate a mouseover function only if the mouse holds on the element

I would like to activate a .mouseover function only if the mouse lays down on the "trigger" element for a predetermined duration (e.g. 500 milliseconds).

E.g.

$('.featured').mouseover(function () {
      $('.feat-txt').fadeOut("fast");
    });

Only if the mouse is positioned over the .featured element for at least 500 milliseconds period, the function can start and .feat-txt can FadeOut. A simple mouse over (just a quick movement) on that element doesn't activate the function.

Any suggestion on how to do that?

Solution

  • I have used hover intent in the past - pretty good and does what you're after I think:

    http://cherne.net/brian/resources/jquery.hoverIntent.html