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?
The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With