title: jQuery hover over child elements makes quirky effects
body: <p>I've got this markup (simplified):</p>
  
  <pre><code>&lt;div class='item'&gt;
    &lt;a&gt; one link &lt;/a&gt;
    &lt;a class='trash'&gt;&lt;img src='trash.png'/&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm highlighting the div when the mouse enters, and showing the (otherwise hidden) 'trash' link (it's like a tiny trash bin) so the user can delete the link.</p>
  
  <p>I can't use 'hover' effect, because I need them to be <strong>live</strong> events. So I'm doing mouseover and mouseout. This is the code:</p>
  
  <pre><code>$('div.link').live('mouseout', function(e){
          console.log(e)
          if(e.target == this){
              $(this).removeClass('hover');
              $(this).children('a.trash').fadeOut();
          }
      });
  </code></pre>
  
  <p>(mouse over does the exacto opposite).</p>
  
  <p>The animation looks quirky though, what am I doing wrong?</p>
  
  <p>Thanks so much!</p>