Home > onMouseOut fix on nested elements – JavaScript

onMouseOut fix on nested elements – JavaScript

When you have nested elements and you add an onMouseOut event handler to the parent element, browsers trigger onMouseOut event when mouse pointer hovers it’s child elements.
While this is a standard behaviour, for one project I needed to write a code to override this behaviour.
With this code, when you mouse over the child elements, onMouseOut event will be ignored.

You can download this code here:
http://images.code-head.com/code/javascript/fixOnMouseOut.zip

You can test it here:
http://images.code-head.com/code/javascript/fixOnMouseOuttest.html

This code is cross browser and here is how to use it:

<script language="javascript" type="text/javascript" src="fixOnMouseOut.js"> </script>
<div onMouseOut="fixOnMouseOut(this, event, 'JavaScript Code');">
   So many child elements
</div>

Filed under: JavaScript, Web Design, Web Development Posted by: Codehead

Got a Question?

Get answers here.

Follow me on Twitter.

7 Comments »

Luca Bartolini:

wow, that’s great! Thank you very much!!!!

Comment
Harry:

Thank you Hamid!

This is exactly what I’ve been looking for. Your code works beautifully! Thanks!

Comment
Santhosh:

Thank you Sir…

this code works very well… being searching for this code…

Comment
Suresh N:

This is the exact code i was searching for. Works well in IE 8 and Firefox.

Thank you very much.

Comment
whitewash:

Great one!
thx.

Comment
Seeker:

You Rock!

Thanks!

Comment
Sumit:

Great help. Thanks a ton

Comment