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

我有1个区域，在mouseenter上，我在以下分区中淡出：

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

假设弹出窗口出现在右侧。如果用户离开左手边的区域怎么办？让我们淡出弹出窗口：

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

我的问题来了：用户应该能够将光标移动到右侧新打开的弹出窗口中，甚至可以单击其中的链接。我的问题是，由于该区域的鼠标移动事件，它会逐渐消失。一个问题可能是弹出窗口不是子窗口。作为悬停区域的子对象，弹出窗口仍将被视为“在”该区域内。因此，我试图找出如何保持弹出可见时，鼠标点击它和鼠标移动该地区。 代码如下：

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

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>

CSS（包括这个）

诀窍是创建一个div（.container），其中显示：block和enclosure.hasmore和.popup
 您可以管理在
悬停
中可见的内容，而不是
鼠标指针
和
鼠标移动
：

大概是这样的：

$('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();
    }
});

你能分享一个JSFIDLE吗？谢谢，我从来没有做过。是时候了，我猜你不能改变标记，使弹出窗口成为该区域的子对象？猜对了；我会把这个添加到描述中。虽然这两个答案都很好，但我更喜欢你的答案，因为它“更干净”，而且不需要更新我的代码。但现在它不起作用了：我的小提琴不好，我忘了添加区域而不是第一个div。你的区域代码不起作用。有什么想法吗？我更新了你的提琴：我发布的原始示例只是查看
div
元素。添加
区域
让它对我有效。哦，我只试了面积。这是有道理的，非常感谢你的好解决方案。还要感谢bitfhacker！
.container {
    display: block;
    line-height: 1em;
    margin: 0;
    padding: 0;
}

$('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();
    }
});