jQuery mouseenter和mouseleave问题，保持切换div显示

Question

I have got 1 area, and on mouseenter I am fading in the following div:

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

Let's say the popup appears on the right hand side. What if the user leaves the area on the left hand side? Let's fade that popup out:

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

Here comes my problem: users should be able to move the cursor into the fresh opened popup to the right and maybe even click a link in there. My problem is that it fades out due to the mouseleave event on the area. One problem might be the fact that the popup is no child. As a child of the area hovering the popup would still count as being 'inside' the area I guess. So I am kind of trying to find out how to keep the popup visible when mouseentering it and mouseleaving the area. Here's the code:

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

Sry if I missed a question where this exact problem is being discussed.

jsfiddle here: fiddle

Answer 1

You could manage what is visible in the hover instead of mouseenter and mouseleave :

Something like this:

$('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 (include this)

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

The trick is to create a div (.container) with display: block and enclosure .hasmore and .popup inside it!