using jQuery .hover() with absoltutely positioned layered elements
<p>I have the following code to display an absolutely positioned (layered with z-index) element ontop of the hovered element.  When the mouse interferes with the element that is faded in on hover and causes mouseout / mouseover to fire repeatedly causing adverse effects.  </p>

<p>What is the best way to code this so the faded in element does not interfere with the hover event?</p>

<pre><code>$("div-below-faded-in-element").hover(function(e) {
    $("hovered-element-positioned-on-top-of-div").fadeIn()
},
function() {
    $("hovered-element-positioned-on-top-of-div").fadeOut()
})        
</code></pre>

<p>Thanks in advance, sorry if this is confusing kind of hard to explain.</p>

<p><strong>jsFiddle Example:</strong>
<a href="http://jsfiddle.net/AWm66/" rel="nofollow">http://jsfiddle.net/AWm66/</a></p>
