title: jQuery mouseout event capture
body: <p>I have some images loaded via the load method, something like this:</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;&lt;img src="1" alt="" /&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="2" alt="" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>On mouseover, I want to append a div inside that <code>&lt;li&gt;</code> with a greater z-index than the img so that div comes "in front" of the image(like a bar with links for image editing). On mouseout I want it to disappear. The problem is that those images are constantly changed (loaded via load method) and I tried something like this:</p>
  
  <pre><code>$('img').live('mouseover',function(){
      $(this).append('&lt;div&gt;links links&lt;/div&gt;');
  });
  
  $('img').live('mouseout',function(){
      $('div').remove()
  });
  </code></pre>
  
  <p>The actual problem is that when the mouse leaves the image area and comes on the div area, the div disappear and appear continuously so I can't click the links inside. Remember that the div comes "over" the image. </p>
  
  <p>How can I do this correctly?</p>