I'll provide a working testcase:
Expand|Select|Wrap|Line Numbers
- <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>
Am I missing something here?