javascript - jQuery fadeOut() 仅当鼠标离开显示的元素时

Question

代码如下:

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

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

如果鼠标离开触发 show() 或 #UserHoverMenu 的链接，我希望 div #UserHoverMenu 淡出。

我试过:

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

        HoverMenuOptions.show();

    });

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

    HoverMenuOptions.hide();

   });

但是如果鼠标离开 #UserProfileName a 然后进入另一个名为 #UserHoverMenu 的 div，隐藏仍然会被触发...当我用光标进入 #UserHoverMenu 时，如何打破触发的 fadeOut()？

Answer 1

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