jQuery fadeOut () только если мышь покидает показанный элемент

#javascript #jquery

#javascript #jquery

Вопрос:

Вот код:

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

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

Я хочу, чтобы div #UserHoverMenu исчезал, если мышь покидает либо ссылку, запускающую show (), либо #UserHoverMenu.

Я пробовал с:

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

        HoverMenuOptions.show();

    });

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

    HoverMenuOptions.hide();

   });
  

Но скрытие все равно срабатывает, если мышь покидает #UserProfileName a , а затем переходит в другой div с именем #UserHoverMenu… Как я могу отключить срабатывающий fadeOut () при вводе курсором #UserHoverMenu?

Комментарии:

1. Я просто знаю, что @Neal придет, чтобы ответить на этот вопрос с потрясающей скрипкой и котенком.

2. @pixelbobby хаха:-P очень хороший

3. Ну … технически вы совершаете ошибку, имея несколько #UserProfileName ‘s. Идентификаторы должны быть уникальными, друг.

4. Ну, поле тоже уникально, так что я все еще могу присвоить ему идентификатор 😉

Ответ №1:

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

Комментарии:

1. Халтурный … Тьфу… Возможно, это необходимо, но я сомневаюсь в этом.

2. вместо того, чтобы напрямую устанавливать css, ему лучше вызвать HoverMenuOptions.show();