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

【问题标题】：jQuery mouseenter and mouseleave problems, keep toggled div shownjQuery mouseenter 和 mouseleave 问题，保持切换的 div 显示
【发布时间】：2015-05-11 23:27:43
【问题描述】：

我有 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">...

抱歉，如果我错过了正在讨论这个确切问题的问题。

jsfiddle 在这里：fiddle

【问题讨论】：

你能分享一个 jsfiddle 吗？
谢谢，没做过。是时候了
我猜您不能更改标记以将弹出窗口作为该区域的子项？
猜对了；我会将其添加到说明中。

标签： javascript jquery mouseenter mouseleave

【解决方案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

【讨论】：

虽然这两个答案都很好，但我更喜欢你的答案，因为它“更干净”并且无需更新我的代码。但现在它不起作用：我的小提琴很糟糕，我忘了添加区域而不是第一个 div。对于区域，您的代码不起作用。任何想法？我更新了你的小提琴：jsfiddle.net/yvqv67dw/2
我发布的原始示例仅查看 div 元素。添加area 让它对我有用。 Here is a fiddle
哦，我只用区域试过了。嗯，这是有道理的，非常感谢这个好的解决方案。还要感谢 bitfhacker！

【解决方案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！

【讨论】：