title: how do you prevent the mouseout of a parent from firing when hovering onto its child element?
body: <p>So let's say I have a red square image that turns green when the mouse goes over it, and it turns back to red when the mouse leaves the square. I then made a menu sort of thing with it so that when I hover on the square, it turns green and a rectangle appears below it. </p>
  
  <p>What I want to happen is this: After the rectangle appears and I move the mouse out of the square and over the rectangle, I want the square to remain green until I move the mouse out of the rectangle.</p>
  
  <p>How do I do this with jquery? The code i use is something like this:</p>
  
  <pre><code>$('.square').hover(function() {
      $(this).addClass('.green'); 
      }, function() {
      $(this).addClass('.red');
  });
  $('.square').hover(function() {
      $(this).children('.rectangle').show(); 
      }, function() {
      $(this).children('.rectangle').hide();
  });
  </code></pre>