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>
Hamid Alipour is a partner in Codehead, LLP with his wife, Tess. Hamid speaks 12 markup and programming languages [Yes, 12: PHP, CSS, Ajax, JavaScript, HTML/XHTML, Java, Python, C/C++, ASP, Visual Basic, Scheme and Action Script]; has a penchant for solving the unsolvable; an affinity for clean, hand-written code and is a Zend Certified 
wow, that’s great! Thank you very much!!!!
Comment
Thank you Hamid!
This is exactly what I’ve been looking for. Your code works beautifully! Thanks!
Comment
Thank you Sir…
this code works very well… being searching for this code…
Comment
This is the exact code i was searching for. Works well in IE 8 and Firefox.
Thank you very much.
Comment
Great one!
thx.
Comment
You Rock!
Thanks!
Comment
Great help. Thanks a ton
Comment