jquery fadeout issue on blur

Question

hi StackOverflow! I have a problem with JQuery and the following markup.

                <div id="ParentContainer">
                    <div class="main">
                        <div class="sub1"></div>
                        <div class="sub2">
                            text
                        </div>

                    </div>
                </div>

I need the ParentContainer to fade into view when the cursor hovers over a link (outside of this markup). this works but I need to then use the fadeout method when the cursor moves outside of the ParentContainer div. Is that possible?

Many Thanks,

Answer 1

Is that possible?

Yes it is!

$('#ParentContainer').bind('mouseleave', function(){
    $(this).fadeOut('fast');
});

Reference: mouseleave

Answer 2

Try:

$('#ParentContainer').mouseleave(function(){
    $(this).fadeOut('slow');
});

Answer 3

Another variant:

$("#ParentContainer").mouseout 
(
    function () {$(this).fadeOut ("fast"); }
);

jQuery makes this work with all supported browsers.

Note from the docs:

The **mouseleave event differs from mouseout** in the way it handles
event bubbling. If mouseout were used in this example, then when the
mouse pointer moved out of the Inner element, the handler would be
triggered. This is *usually* undesirable behavior. The mouseleave event,
on the other hand, only triggers its handler when the mouse leaves the
element it is bound to, not a descendant. So in this example, the
handler is triggered when the mouse leaves the Outer  element, but not
the Inner element.