jQuery fadeOut() only if mouse leaves the shown element

H开发者_如何学JAVAere's the code:

var HoverMenuOptions = {
    show: function() {
        $("#UserHoverMenu").css({"display": "block"});
    },

    hide: function() {
        $("#UserHoverMenu").delay(2000).fadeOut(function() {
            $(this).css({"display": "none"});
        });
    }
};

I want the div #UserHoverMenu to fadeOut if mouse leaves either the link triggering show() or #UserHoverMenu.

I have tried with:

   $('#UserProfileName a').click(function() {

        HoverMenuOptions.show();

    });

   $('#UserProfileName a, #UserHoverMenu').mouseleave(function() {

    HoverMenuOptions.hide();

   });

But hide is still triggered if mouse leaves #UserProfileName a and then into another div called #UserHoverMenu... How can I break the triggered fadeOut() when I enter #UserHoverMenu with the cursor?

$('#UserHoverMenu').mouseenter(function(e){
  $(this).stop(true,true).css({"display": "block"});
});