title: jQuery - mouseover/mouseout with multiple divs
body: <p>I have a hidden div nested inside a larger div, and set it up so when you mouseover the larger div, the hidden div slides down. On mouseout, the div slides back. The problem is, when the mouse goes over the smaller div, it tries to slide it back up because the mouseout event was triggered. How can I prevent the div from hiding again until the mouse is over neither div?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="topbarVis" class="col1 spanall height1 wrapper"&gt;
      &lt;div id="topbar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(the extra classes are part of a modular css system and define the width and height, among other things, of #topbarVis</p>
  
  <p>css:</p>
  
  <pre><code>#topbar {
    width: 100%;
    height: 30px;
    margin-top: -25px;
    background-color: #000;
  } 
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>// On Mouseover -&gt; Show
  $("#topbarVis").mouseover(function(){
    $("#topbar").animate({marginTop:0}, 300);
  });
  // On Mouseout -&gt; Hide
  $("#topbarVis").mouseout(function(){
    $("#topbar").animate({marginTop:-25}, 300);
  });
  </code></pre>