Is there a way to stop this javascript bug in IE9

Question

I have a issue with some javascript code showing overlays in IE9, it works fine in Chrome, Firefox, even IE8. However when being run in IE9, several weird things happen. Basically, hovering over the are is meant to make an overlay with some text appear, but in IE9, the first overlay is being cloned or something, so I'm getting a strip with the same styling and position of the first div, but none of the content. Here's an example of how the HTML looks:

<img usemap="#mymap"/>
<map id="mymap">
<area id="first" onmouseover="ShowOverlay(this);" onmouseout="HideOverlays()";>
<area id="second" onmouseover="ShowOverlay(this);" onmouseout="HideOverlays()";>
</map>
<div id="first-Overlay" class="overlay" onmouseover="OverlayOnHover(this);" onmouseout="OverlayMouseOff(this);">
some text here.
</div>
<div id="second-Overlay" class="overlay" onmouseover="OverlayOnHover(this);" onmouseout="OverlayMouseOff(this);">
more text here.
</div>

And the javascript it's attached to is:

<script type="text/javascript">
var PreviousOverlay;
function ShowOverlay(sender) {
    if (PreviousOverlay) {
        PreviousOverlay.style.display = 'none';
    }
    NewOverlay = document.getElementById(sender.id + '-Overlay');
    if (NewOverlay) {
        NewOverlay.style.display = 'inline';
    }
    PreviousOverlay = NewOverlay;

    return false;
}
function HideOverlays() {
    if (PreviousOverlay) {
        PreviousOverlay.style.display = 'none';
    }
    PreviousOverlay = null;
    return false;
}
function OverlayOnHover(Overlay) {
    Overlay.style.display = 'inline';
}
function OverlayMouseOff(Overlay) {
    Overlay.style.display = 'none';
}
</script>

Using the Web Developer tools in IE, I can change the the "first-Overlay" display to inline, and then it will be visible along with the strip that is being returned by getElementById('first-Overlay'). Does anyone know what causes this in IE9? I've really hit a brick wall as far as thinking up workarounds goes.

Answer 1

I tried using jQuery, the bug still happened.

In the end my workaround was to add a dummy div with absolute positioning, etc in front of the first div. This div never gets shown, so the bug doesn't have any visible effect.