jQuery fadeOut() only if mouse leaves the shown element
<p>Here's the code:</p>

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

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

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

<p>I have tried with:</p>

<pre><code>   $('#UserProfileName a').click(function() {

        HoverMenuOptions.show();

    });

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

    HoverMenuOptions.hide();

   });
</code></pre>

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