title: jQuery mouseover/mouseout flickers
body: <p>I have the following HTML</p>
  
  <pre><code>&lt;div class="individual"&gt;
      &lt;div class="change"&gt;change&lt;/div&gt;
      &lt;div class="picture"&gt;&lt;img src....&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>.change</code> has <code>position: absolute;</code> and is invisible. On mouseover <code>.picture</code>, I want <code>.change</code> to appear, and on mouseout, to disappear. If the individual clicks <code>.change</code> then something should happen.</p>
  
  <p>Right now, when mouse goes over change, then it is treated as mouseout of picture, and so change starts to flicker! </p>
  
  <p>I then made this jQuery:</p>
  
  <pre><code>$('.change').mouseout(function(){
      $('.picture').mouseout(function(){
          $(this).parent().children('.change').hide();
      });
  });
  
  $('.picture').mouseover(function(){
      var i = $(this).parent().children('.change').show();
  });
  </code></pre>
  
  <p>This works fine only the first time! If I move out the picture, then when I come back on, and go on change, everything starts to flicker!! What do I do?!</p>
  
  <p>Thanks</p>