Создание логики с помощью jQuery в зависимости от того, куда пользователь наводит курсор мыши

#jquery

Вопрос:

У меня есть элемент списка, который, когда пользователь наводит на него курсор мыши, анимирует div на странице. Проблема, с которой я сталкиваюсь, заключается в том, что происходит дальше. Когда пользователь отводит мышь от исходного элемента списка, если он перемещает его по div, который изначально анимирован, у меня логика работает оттуда без проблем. Проблема в том, что произойдет, если пользователь наведет курсор мыши на элемент списка, а не на анимированный div. Я пытаюсь создать функцию, которая учитывает эту более позднюю ситуацию. Если пользователь наведет курсор мыши на элемент списка (li.solutions), и он НЕ наведет курсор на анимированный div, который только что появился, анимированный div снова скроется.

Я опубликовал базовый код на jsfiddle: http://jsfiddle.net/9bE2p /

Ответ №1:

Я мог бы представить, что вы хотите, чтобы div отображалось при li наведении курсора мыши, а когда пользователь отклоняется как от div , так и от li , div это должно быть скрыто.

Если да, то это может быть то, что вы ищете?

 $(document).ready(function(){
    // hide nav_top_dropdown first
    $('.nav_top_dropdown').hide();

    // set hover functionality, also on the hidden dropdown
    $('.solutions, .nav_top_dropdown').hover(function(){
        $('.nav_top_dropdown').show();       
    }, function(){
        // hovering off situation
        $('.nav_top_dropdown').hide();
    });
});

1. спасибо за ваш ответ! проблема в том, что как только я навожу курсор с элемента навигации на выпадающий список, выпадающий список возвращается обратно. ваш ответ — это направление, в котором я пытаюсь двигаться. просто нужно выяснить, как отменить откат выпадающего списка, если я наведу курсор на выпадающий список после выхода из элемента списка.

2. Возможно ли изменить ваш HTML? Потому что в этой ситуации, возможно, было бы лучше использовать правильную вложенность (поместить div-элемент в li-элемент, чтобы событие li-hover распространялось на div)

Ответ №2:

Я думаю, что вам нужно следующее. По сути, это запускает действие скрытия при выходе из меню, но задерживает его, чтобы предоставить возможность отменить, если, например, пользователь переместит курсор на выпадающий список. Если они это сделают, скрытие будет восстановлено, когда они покинут выпадающий список.

 var timerId;
function maybeHideDropdown() {
    function hideDropdown() {
       $(this).removeClass('nav_down').animate({'top': '-120px'}, 1000);
    }
    timerId = setTimeout(hideDropdown, 200);
}

function cancelHideDropdown() {
  clearTimeout(timerId);
}

$('.solutions').hover(
  function () { 
    cancelHideDropdown(); // in case they move from dropdown back to menu
    $('.nav_top_dropdown').animate({'top': ' 60px'}, 1000).addClass('nav_down');
  },
  function () {
    maybeHideDropdown();
  }
);

$('.nav_top_dropdown').hover (
  function () {
    cancelHideDropdown();
    $(this).addClass('nav_down');
  },
  function () {
    maybeHideDropdown();
  }
);