mouseenter / mouseleave подвержены влиянию вложенных дочерних объектов

Question

Я скрываю панель управления (myNestContainer) на документе готовым. У меня есть кнопка с именем navMyNest, которая при появлении mouseenter показывает myNestContainer. Это отлично работает.

Проблема в том, что я хочу, чтобы пользователь мог просматривать панель управления, однако, если в myNestContainer есть вложенные DIV-контейнеры, сразу после ввода один из них mouseleave вступает в силу и панель управления закрывается.

Это работает намного лучше, чем mouseenter / mouseout, но все еще не обладает той функциональностью, которая мне бы хотелось.

Есть мысли о том, как переопределить дочерние объекты, чтобы панель управления оставалась открытой, пока пользователь просматривает ее?

Заранее спасибо.

$(document).ready(function() {
$("div#myNestContainer").hide();
});

$("div#navMyNest").live("mouseenter", function(event) {
    $("div#myNestContainer").show();
});

$("div#myNestContainer").live("mouseleave", function(event) {
    $("div#myNestContainer").hide();
});

Answer 1

Используйте event.relatedTarget, чтобы сохранить родительский элемент видимым, если мышь перемещается к вложенному элементу.

$('#myNestContainer').mouseout(function(e)
{
    var evt = e || window.event;
    if (evt.relatedTarget != document.getElementById('navMyNest'))
    {
        $("#myNestContainer").hide();
    }
});

Answer 2

Мне пришлось прибегнуть к множеству безобразных хаков, чтобы заставить этот тип работать.И это были браузерные хаки тоже.В моем случае в моих вложенных элементах были элементы iframe.

Мне пришлось использовать задержки / тайм-ауты, получить положение мыши (x, y) и отвечать на события mousemove.

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

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

Чтобы увидеть его в действии, наведите курсор мыши на иконку Facebook «f» в правом верхнем углу: http://www2.highpoint.edu/

Answer 3

Вы можете использовать функцию jquery hover, чтобы преодолеть проблему ...

http://api.jquery.com/hover/

Она в основном решает проблему, с которой вы сталкиваетесь в настоящее время.Используйте следующий кусок кода

 $("div#myNestContainer").hover( 

    function () {
     $("div#myNestContainer").show(); 
    },

    function () { 
    $("div#myNestContainer").hide(); 
    }
);