在指定的div上鼠标拖出并保持原始div打开

时间:2011-06-27 19:26:52

标签: jquery events html mouseover mouseout

我正在尝试用简单的英语做这个:我有一个来自鼠标悬停事件的开放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外部也会将​​其变为粉红色,此时它应变为灰色并隐藏它。知道如何让它变成灰色并隐藏吗?

2 个答案:

答案 0 :(得分: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(); 
    }
});

答案 1 :(得分:0)

为什么不简单地保持简单的悬停逻辑(隐藏在鼠标外),然后在鼠标悬停在X或Y div上时重新显示它。

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

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

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