onmouseout onmouseover event handlers Problem causes child elements event handlers to fire / trigger /actuate – Use mouseenter mouseleave on the parent element instead. It will prevent the child elements from firing as well.
Recently – I found myself in the need of a DIV within a DIV – where they both needed mouse events to be triggered independently, as the user mouses over the parent and then child DIV. The mousing of the child div – caused the parent “onmouseout” to actuate unnecessarily.
The solution is to NOT use “onmouseout” or “onmouseover”.
As “onmouseout” or “onmouseover” are subject to “Event bubbling” as it is known. “event on element2 takes precedence. This is called event bubbling”. http://www.quirksmode.org/js/events_order.html
The mousing of the child div that uses onmouseover – causes the parent “onmouseout” to trigger.
Along with JQUERY – Use the “mouseenter” and “mouseleave” on the parent div instead – the child elements will not effect the “onmouseleave”