How to show/hide a div on mouseover?
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/9564481/how-to-show-hide-a-div-on-mouseover-using-jquery">How to show/hide a div on mouseover using jquery?</a>  </p>
</blockquote>



<p>I have a div like this:</p>

<pre><code>&lt;div id="parent"&gt;
     foo
      &lt;div id="child" style="display:none;"&gt;
         hidden
       &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I want to have the <code>child</code> div shown whenever someone moves their mouse over the <code>parent</code> div, and when he moves his mouse away, to hide the parent div.</p>

<p>However if I do this:</p>

<pre><code>$("#parent").mouseover(toggle);
$("#parent").mouseout(toggle);
function toggle()
{
   console.log('here');
   $("#child").toggle();
}
</code></pre>

<p>Then both events seem to get called twice each time i move my mouse over the #parent div. How can I achieve what I want?</p>
