I just noticed that in FireFox, onmouseover and onmouseout events do not work properly when a div's overflow is set to hidden/auto/scroll. If you click and hold inside the div with onmouseover/out listeners and move the mouse away, the events won't launch (they do launch properly in IE7, haven't tested other browsers). If the div has overfloe:visible, the events fire as expected.
I'll provide a working testcase:
-
<html>
-
<head>
-
<script type="text/javascript">
-
function showMouseOverDivStatus ( mouseOverDiv ){
-
var mouseOverDivStatus = window.document.getElementById("mouseOverDivStatus");
-
mouseOverDivStatus.innerHTML = mouseOverDiv;
-
}
-
function setInnerDivOverflow( newOverflow ){
-
var innerDiv = document.getElementById("innerDiv");
-
innerDiv.style.overflow = newOverflow;
-
}
-
</script>
-
</head>
-
<body>
-
Mouse over inner div: <span id="mouseOverDivStatus">false</span>
-
<div style="background:red; height:200px; width:200px">
-
<div
-
id="innerDiv"
-
style="position:absolute;top:50px;left:50px;background:yellow;height:100px;width:100px;"
-
onmouseover="showMouseOverDivStatus('true');"
-
onmouseout="showMouseOverDivStatus('false');"
-
>
-
Hold left click inside yellow area and move mouse away.
-
</div>
-
</div>
-
<input type="button" value="Visible Overflow" onclick="setInnerDivOverflow('visible');" /><br>
-
<input type="button" value="Scroll Overflow" onclick="setInnerDivOverflow('scroll');" /><br>
-
<input type="button" value="Hidden Overflow" onclick="setInnerDivOverflow('hidden');" /><br>
-
<input type="button" value="Auto Overflow" onclick="setInnerDivOverflow('auto');" /><br>
-
</body>
-
</html>
-
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Am I missing something here?