CODEWITHSUNDEEP
jqueryhoverintent
Travis L
Travis L

Reputation: 681

Using hoverIntent to delay mouseover but not mouseout

I am attempting to show/hide an overlay on blog articles when the user hovers over the articles. I have hoverIntent working as it should to delay the event on mouseover, but I would like the mouseout event to happen instantly as it would without hoverIntent. As far as I can tell there is no way to set a separate timout value for the over and out events. Does anybody know how to separate them, or how to have hoverIntent only delay the over event? 

$( document ).ready( function() {    
    $(".bg-overlay").hide();

    $(".bg-entry").hoverIntent({
        over: showSummary, 
        timeout: 650, 
        out: hideSummary
    });
});

function showSummary(){ $(this).children(".bg-overlay").fadeIn("fast");  }
function hideSummary(){ $(this).children(".bg-overlay").fadeOut("fast"); }

Thanks for your help.

Upvotes: 2

Views: 2724

Answers (1)

nsdel
nsdel

Reputation: 2263

The timeout is the delay before the out function is called - simply set it to 0.

Alternatively, call hoverIntent as:

$(".bg-entry").hoverIntent(showSummary, hideSummary);

Upvotes: 3

Related Questions