jQuery - detect mouse out of new element
<p>I've built a menu using jQuery which shows a new element fading in when the user hovers the mouse over the element and fades it out when they move the mouse away. Now, I've moved the element up so it covers the original element which is causing the problem that the second hover event is triggered when the new element is placed over the top. What would be the best method to ignore the new element and only fade out once the mouse has moved out of the bound of the original element?</p>

<p>Here's the code:</p>

<pre><code>$('#menuitem').hover(function() {
    $('#menu').append('&lt;span id="hover_'+$(this).attr('rel')+'" class="hover"&gt;&lt;/span&gt;');
}, function() {
    $('#hover_'+$(this).attr('rel')).fadeOut(function(){$(this).remove();});
});
</code></pre>

<p>Now, the <code>#menu</code> item is a anchor with some text in it, when the mouse is over it, a new element (<code>.hover</code>) should appear on top and should fade out once the mouse leaves the original menu item.</p>

<p>What's currently happening is that the new element appears and fades out immediately as the second hover function is triggered when the new item is added on top of the original anchor.</p>

<p>Thanks,
J</p>
