JQuery MouseEnter и MouseLeave проблема, держать переключены ДИВО показано

Question

У меня 1 площади, и на MouseEnter я замирание в следующем DIV:

$("area.hasmore").mouseenter(function() { 
    $(this).next(".popup").stop().fadeIn(); 
}); 

Скажет, на правой стороне появится всплывающее окно. Что делать, если пользователь покидает область с левой стороны? Давайте выцветаем, что всплывающие окна из:

$("area.hasmore, .popup").mouseleave(function() { 
    $(".popup").fadeOut(); 
}); 

вот моя проблема: пользователи должны иметь возможность перемещать курсор на свежее открытом всплывающее окно справа и, возможно, даже нажать на ссылку там. Моя проблема заключается в том, что она исчезает из-за события mouseleave в этой области. Одной из проблем может быть тот факт, что всплывающее окно не является дочерним. Как ребенок области, парящей всплывающее окно, все еще считалось бы «внутри» области, я думаю. Таким образом, я как бы пытаюсь выяснить, как сохранить всплывающее окно видимым, когда мышь в нем и мышь. Вот код:

<area class="hasmore" /> 
<div class="popup">... 

Sry если я пропустил вопрос, где эта точная проблема обсуждается.

jsfiddle здесь: fiddle

Answer 1

Вы можете управлять тем, что видно в hover вместо mouseenter и mouseleave:

Что-то вроде этого:

$('div').hover(function() { 
    console.log(this.className); 
    if (this.className === 'hasmore') { 
     $(this).next(".popup").stop().fadeIn(); 
    } else if (this.className !== 'hasmore' && this.className !== 'popup') { 
     $(".popup").fadeOut(); 
    } 
}); 

Here is a fiddle demonstrating

Answer 2

HTML

<div class="hasmore">hover me</div> 
<div class="popup">Popup 1</div> 

<div class="evenmore">stuff</div> 
<div class="popup">2nd popup. don't mind me</div> 

Javascript

$(".container").mouseenter(function() { 
    $(".popup").stop().fadeIn(); 
}); 

$("div.container").mouseleave(function() { 
    $(".popup").fadeOut(); 
}); 

CSS (включая это)

.container { 
    display: block; 
    line-height: 1em; 
    margin: 0; 
    padding: 0; 
} 

Хитрость заключается в том, чтобы создать DIV (.container) с дисплеем: блок и корпус .hasmore и .popup внутри него!