onMouseOut effect fired when mouse cursor goes to child div.... I dont want to do that - onmouseout

Question

Here is my code --
<li>
<a id="LoginTxt2" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);" href="#">
<div style="background-color:#CCC;">OLD Text</div>
</a>
</li>
JS--
MouseOver = function(obj){
var id = obj.id;
document.getElementById(id).innerHTML='<div style="background-color:#DDD;">NEW Text</div>';
}
MouseOut = function(obj){
var id = obj.id;
document.getElementById(id).innerHTML="<div style="background-color:#CCC;">OLD Text</div>";
}
when my mouse goes to child div, MouseOut fierd i dont want to do that... plz help

Answer 1

This is the way the event works and there's no way of avoiding the MouseOut() function to be called. What you can do is check, inside the MouseOut() function, if the element you're now hovering is a child element of the outer element:
MouseOut = function(obj, event) {
// this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
// check for all children levels (checking from bottom up)
while (e && e.parentNode && e.parentNode != window) {
if (e.parentNode == this|| e == this) {
if(e.preventDefault) {
e.preventDefault();
}
return false;
}
e = e.parentNode;
}
var id = obj.id;
document.getElementById(id).innerHTML="<div style="background-color:#CCC;">OLD Text</div>";
}
Note that you need to change the onmouseout declaration to onmouseout="MouseOut(this,event);".
NOTE: solution derived from https://stackoverflow.com/a/13141057/1417546