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 — March 8, 2010 @ 6:04 am