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

Question

我有 1 个区域，在 mouseenter 上我在以下区域逐渐消失 div:

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

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

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

我的问题来了：用户应该能够将光标移动到右侧新打开的弹出窗口中，甚至可以单击其中的 link。我的问题是它由于该区域的 mouseleave 事件而淡出。一个问题可能是弹出窗口不是子窗口。作为悬停区域的子项，弹出窗口仍算作 'inside' 我猜的区域。所以我有点想找出如何在鼠标进入和鼠标离开该区域时保持弹出窗口可见。这是代码：

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

对不起，如果我错过了一个正在讨论这个确切问题的问题。

jsfiddle 在这里：fiddle

Answer 1

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) with display: block and enclosure .hasmore and .popup inside!

Answer 2

您可以管理 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

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

jQuery mouseenter and mouseleave problems, keep toggled div shown

javascript

jquery

mouseenter

mouseleave