Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 332
Cybermac Avatar asked Nov 03 '09 10:11

Cybermac


People also ask

Which event is triggered when a mouse is hovering over an element?

The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.

How do you check if the mouse is over an element?

You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery.


1 Answers

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

like image 156
Paul Avatar answered Oct 11 '22 18:10

Paul