Jquery Show/hide Problem

[severndigital]

I am trying to show / hide some divs inside another div, I am running into a problem.

here is my code

<script>
function showTools()
{
$('#toggle').show('blind');
}

function hideTools()
{
$('#toggle').hide('blind');
}

</script>
<h1>Test Area</h1>

<div id="wrapper" style="height:150px; width:125px; border:1px solid black;" onmouseover="showTools();" onmouseout="hideTools();">
<div id="toggle" class="span-3 last hideMe">
<div id="tool1" class="span-1">
 Tool
 </div>
 <div id="tool2" class="span-1">
 Tool
 </div>
 <div id="tool3" class="span-1 last">
 Tool
 </div>
</div>
</div>

<script>
$(function(){$('.hideMe').hide();});
</script>

 

the problem is when I enter the "revealed" div, it counts as a "onmouseout" command on the wrapper div and hides the toggle div. once the div is gone it counts as a "onmouseover" on the wrapper div and the toggle div appear again. This loops over and over until you move off the wrapper div.

 

I know why it's happenen, but I have no idea how to fix it.

 

Any help would be great.

 

thanks,

[haku]

Which one is the 'revealed' div? Not seeing that.

[codefossa]

You're using jQuery, so why not use the $.hover() function? That lets you do hover/unhover without all the extra attributes and functions.