Вот (из старых запасов) грубый пример проблемы и ее возможного решения (раскомментировать закомментированное):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover example</title>
<style type="text/css">
.outer {
position: relative;
width: 220px;
height: 96px;
border: solid 1px black;
background-color: coral;
}
.inner {
position: absolute;
top: 40px;
left: 40px;
border: solid 1px black;
background-color: khaki;
}
#outer2 {
margin-top: 24px;
}
</style>
<script type="text/javascript">
function overout(evnt) {
var e = (evnt) ? evnt : event;
/* var p = (e.relatedTarget) ? e.relatedTarget : ((e.type == "mouseover") ? e.fromElement : e.toElement);
while (p && p != this) try { p = p.parentNode; } catch(e) { p = this; }
if (p == this) return; */
document.getElementById("console").innerHTML += (e.type == "mouseover") ? "mouse enter!!<br>" : "mouse leave!!<br>";
}
window.onload = function() {
var outer2 = document.getElementById("outer2");
outer2.onmouseover = overout;
outer2.onmouseout = overout;
}
</script>
</head>
<body>
<div class="outer" id="outer2">
Outer 2
<div class="inner" id="inner2">Inner 2</div>
</div>
<div id="console"></div>
</body>
</html>
Как видно, при наведении на дочерние элементы, срабатывает событие mouseout родительского. Однако используя свойство relatedTarget (fromElement/toElement для IE), этого можно избежать