Javascript onHover event
How about something like this?
<html><head><script type="text/javascript">var HoverListener = { addElem: function( elem, callback, delay ) { if ( delay === undefined ) { delay = 1000; } var hoverTimer; addEvent( elem, 'mouseover', function() { hoverTimer = setTimeout( callback, delay ); } ); addEvent( elem, 'mouseout', function() { clearTimeout( hoverTimer ); } ); }}function tester(){ alert( 'hi' );}// Generic event abstractorfunction addEvent( obj, evt, fn ){ if ( 'undefined' != typeof obj.addEventListener ) { obj.addEventListener( evt, fn, false ); } else if ( 'undefined' != typeof obj.attachEvent ) { obj.attachEvent( "on" + evt, fn ); }}addEvent( window, 'load', function(){ HoverListener.addElem( document.getElementById( 'test' ) , tester ); HoverListener.addElem( document.getElementById( 'test2' ) , function() { alert( 'Hello World!' ); } , 2300 );} );</script></head><body><div id="test">Will alert "hi" on hover after one second</div><div id="test2">Will alert "Hello World!" on hover 2.3 seconds</div></body></html>
Can you clarify your question? What is "ohHover" in this case and how does it correspond to a delay in hover time?
That said, I think what you probably want is...
var timeout;element.onmouseover = function(e) { timeout = setTimeout(function() { // ... }, delayTimeMs)};element.onmouseout = function(e) { if(timeout) { clearTimeout(timeout); }};Or addEventListener/attachEvent or your favorite library's event abstraction method.
If you use the JQuery library you can use the .hover() event which merges the mouseover and mouseout event and helps you with the timing and child elements:
$(this).hover(function(){},function(){});The first function is the start of the hover and the next is the end. Read more at:http://docs.jquery.com/Events/hover