JQuery при наведении на любой элемент

Question

Итак, у меня есть 2 деления. Один из них «верхний», а другой «меню». У меня появилось «меню», когда вы наводите курсор на «верх» в JQuery, как показано:

$(".top").mouseover(function(){
    $(".menu").fadeIn(200);
});

$(".top").mouseout(function(){
    $(".menu").fadeOut(200);
});

Но я хочу сделать так, чтобы, если я тоже зависал над «меню», «меню» оставалось блеклым. Как бы я это сделал?

Answer 1

Я верю, что это сделает это за вас. Он ждет полсекунды, прежде чем скрыть меню. Если в это время пользователь наводит курсор мыши на меню, он отменяет операцию скрытия.

var timer;

$(".top").mouseover(function(){
    clearTimeout(timer);
    $(".menu").fadeIn(200);
});

$(".top, .menu").mouseout(function(){
    timer = setTimeout(function() {
        $(".menu").fadeOut(200);
    }, 500);
});

$(".menu").mouseover(function() {
    clearTimeout(timer);
});

Answer 2

Добавьте переменную, которая запоминает, если вы зависаете в меню:

var isHoveringMenu;

$(".menu").mouseover(function(){
    isHoveringMenu = true;
});

$(".menu").mouseout(function(){
    isHoveringMenu = false;
    $(".menu").fadeOut(200); // you probably want this here
});

$(".top").mouseover(function(){
    $(".menu").fadeIn(200);
    isHoveringMenu = true; // not necessary, but sounds good
});

$(".top").mouseout(function(){
    if (!isHoveringMenu) {
        $(".menu").fadeOut(200);
    }
});

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