Question

我有一个区域，在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">...

如果我错过了一个正在讨论这个确切问题的问题，那该呀。

jsfiddle here：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），其中包含display：block和enclosure .hasmore和.popup！

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

2 个答案: