鼠标悬停在指定的 div 上并保持原始 div 打开答案

【问题标题】：Mouseout on specified divs and keep original div open鼠标悬停在指定的 div 上并保持原始 div 打开
【发布时间】：2011-09-23 18:46:36
【问题描述】：

我试图用简单的英语做到这一点：我有一个来自 mouseover 事件的打开 div，当我将鼠标从 div 中取出时，它会在鼠标移出时关闭，完美。我需要的是，当我鼠标移出时，如果我将鼠标移到 x 类或 y 类的 div 上，openDiv 将不会关闭，除了 x 类或 y 类之外的任何其他 div 上的任何鼠标移出都会导致 openDiv 关闭。

这是我目前所拥有的，但它不起作用：

$("#openDiv").mouseout(function () {
    var $c = $(e.target); //div where mouse is
    if ($c.is('div.x') || ('div.y')) //if div where mouse is has class x or y
    {
        $("#openDiv").show(); //show or keep open from the mouseover event
    } else {
        $("#openDiv").hide(); //hide openDiv if mouse is anywhere outside openDiv or div with class x or y
    }
});

更新： 我需要更多帮助来选择有效的答案！ jsfiddle.net/bUzPG/8 悬停在类 x、y 或 z 上使其保持打开状态，悬停在 x 或 z 上会使 openDiv 变为粉红色，但悬停在 openDiv 之外也会将其变为粉红色，此时它应该变为灰色并隐藏它。知道如何使它变灰并隐藏吗？

【问题讨论】：

您的.is() 不需要或声明。使用逗号。 .is('div.x, div.y')
根据尼尔的回答，我认为这行不通。看看他的小提琴。基本上，openDiv 的 mouseout 永远不会返回 x 或 y（除非它们被分配给 openDiv 本身）。

标签： jquery events html mouseover mouseout

【解决方案1】：

$("#openDiv").mouseout(function (e) { //you forgot to add the event `e` element
    var $c = $(e.target);
    if ($c.is('div.x') || $c.is('div.y')) //you forgot $c.is on the second part
    {
        $("#openDiv").show(); 
    } else {
        $("#openDiv").hide(); 
    }
});

【讨论】：

$(e.target) 似乎并没有像他认为的那样做。至少对我来说，在 jsfiddle e 中什么都不是
我认为这是最接近的答案，但我无法让它做他想做的事。见小提琴 - jsfiddle.net/bUzPG
请检查这个小提琴：jsfiddle.net/bUzPG/8 悬停在类 x、y 或 z 上使其保持打开状态，悬停在 x 或 z 上会使 openDiv 变为粉红色，但悬停在 openDiv 外部也会将其变为粉红色，当它应该变成灰色并隐藏它。知道如何使它变灰并隐藏吗？

【解决方案2】：

为什么不简单地保持简单的悬停逻辑（鼠标移出时隐藏），然后在鼠标悬停在 X 或 Y div 上时简单地重新显示它。

$('#openDiv').mouseout(function() {
    $(this).hide();
});

$('div.x').mousein(function() {
    $('#openDiv').show();
});

如果你让你的 $('div.x') 选择器有一个 ID 或至少一个不是整个 DOM 的上下文，我敢打赌，隐藏然后再次显示的“闪烁”甚至都不明显。

【讨论】：