onmouseout not always working

XmisterIS

01-05-2012, 05:09 PM

I have a test peice of html is set up roughly like this:

<div id="bill" onmouseover="javascript: show('bob'); hide('bill');">
<h1>Bill says hi</h1>
</div>
<div id="bob" style="visibility:hidden; display:none;" onmouseout="javascript: show('bill'); hide('bob');">
<h1>Bob says hi</h1>
</div>

And my javascript looks like this:

function show(elemId) {
elem = document.getElementById(elemId);
elem.style.visibility = "visible";
elem.style.display = "block";
}

function hide(elemId) {
elem = document.getElementById(elemId);
elem.style.visibility = "hidden";
elem.style.display = "none";
}

You can see what it does from the code: When the page loads, it shows the text Bill says hi. When you move the mouse over the text, it changes to Bob says hi. When you move the mouse away from the text, it reverts to Bill says hi.

BUT - this only seems to work consistently when the mouse is moved away from the text at slow speed - if you pull the mouse away quickly, it sometimes gets stuck on Bob says hi.

Any ideas why? :confused::confused::confused:

xelawho

01-05-2012, 05:25 PM

hmmm... seems to be worse in IE, but that's no surprise. And it's worth noting that the div goes the width of the page, so up and down is the only mousemove that you should be testing with. Fwiw, the code can be simplified somewhat:

<body>
<div id="bill" onmouseover="show('bob', 'bill');">
<h1>Bill says hi</h1>
</div>
<div id="bob" style="display:none;" onmouseout="show('bill', 'bob');">
<h1>Bob says hi</h1>
</div>
<script type="text/javascript">
function show(one,two) {
document.getElementById(one).style.display = "block";
document.getElementById(two).style.display = "none";
}

</script>
</body>

XmisterIS

01-05-2012, 06:43 PM

Yes, I know, TBH you could have a stylesheet that sets the width and position of the DIV, whatever, but it doesn't fix the problem though!