Hover delay using javascript!

JavaScript
1

I need to delay a hover effect on a anchor tag, I need something that delays the hover effect when javascript is on and when it’s off your still able to get the hover effect when you roll over the anchor tag.

2

I believe you’re after something like hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html)

Can you elaborate a bit more about what you need to do when someone hovers over a link? Generally you would only want to add mouseover JavaScript functionality if it is something you can not otherwise achieve.

Be aware that when JavaScript is turned off, you will only have access to the :hover pseudoclass in CSS.

3

Thanks Aussie for the reply, I need the user to hover over the link for a certain amount of time ( the link is to a drop down menu that only comes visible when rolled over ) so users don’t accidently open up the drop down menu.

4

I gained knowledge now from reading this thread.

5

I think you’ll find that hoverIntent is perfect for what you need to do then, together with a suckerfish type CSS menu, you’ll be able to use standard CSS to get it to work and then enhance it with JS.

6

Basically what you would be doing is:

Delay the calling of the event handler for a few secs.
If the event fires before the delay completes, reset the event handler delay.

Simplistic example:

// a generic delay before calling a function
function genericDelay(fn, ms) {
   var timer;
   return function() {
      clearTimeout(timer);
      timer = setTimeout(fn, ms || 500);
   }
};

// get the element you want to set a event handler for
var element = document.getElementById('link');

// now just wrap your functions with genericDelay() to get delayed execution
element.onHover = genericDelay(function() { /** your onhover code */ }, 200);

If the onHover event is triggered, a setTimeout() call will set the event handler to execute after 200 millisecs.
If the onHover is triggered again within 200 millisecs, the timeout will be reset for 200 millisecs.