Question

I have a bunch of dynamically created elements in a page, with different ‘onmouseover’ scripts. I’m wondering if I can use a jquery script to automatically replace their onmouseover with an equivalent hoverintent.

Example:

<div onmouseover='dothis()'>Hello</div>
<div onmouseover='dothat()'>World</div>
<div onmouseover='dosomething()'>Seeya</div>

and then with jquery something like ‘for the elements that have a bound ‘onmouseover’ event, replace the call with a hoverintent equivalent.

I’m not even sure it’s possible, how would I do that?

Answer 1

Not sure how x-browser compatible this is but works on Chrome.

I grab all elements with the onmouseover attribute defined. I cycle through each element saving the onmouseover attribute value then erasing the attribute from the element. I then add a new hover event to each element setting a timeout on hover on and clearing it on hover off. When the timeout does execute it runs the saved onmouseover attribute value.

The default timeout time is 1 second (1000ms).

jQuery:

$('[onmouseover]').each(function(){

    var _ = $(this).attr('onmouseover');

    $(this).attr('onmouseover', '').hover(function(){    
        $(this).data('timeout', setTimeout(function(){ eval(_); },1000));         
    },function(){        
        clearTimeout($(this).data('timeout'));        
    });

});​

Fiddle:

http://jsfiddle.net/iambriansreed/D3dmv/