Question

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.

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

$("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()
})        

Thanks in advance, sorry if this is confusing kind of hard to explain.

jsFiddle Example:
http://jsfiddle.net/AWm66/

Answer 1

EDIT: Check out this jsFiddle that I made. I just added a wrapper for btm and top and added the event handler for it.

jsFiddle sample