暂停悬停延迟悬停不同div

Question

我想让第一个方框休眠，然后显示较大的盒子有点延迟，然后当我将鼠标悬停在大盒子上，大盒子仍然出现。但是，我的代码工作不正确。

如果有人能帮我一把吗？由于

样品http://jsfiddle.net/9oLs3fyh/

var timeout; 
$("#box1").hover(function() { 
    clearTimeout(timeout); 
    $("#box2").delay(500).show(); 
}, function() { 
    timeout = setTimeout(function(){ 
     $("#box2").delay(500).hide(); 
    },500); 
}); 

if($("#box2").is(':hover')){ 
$("#box2").show(); 
} 

Answer 1

尝试assiging类hovered（检查DEMO）：

CSS

.hovered { display:block } 

在#accountIcon assig的鼠标中n hovered#accountPopup元素。

然后，在mouseleave上，如果目标元素（#accountPopup）不可见，请删除该类。

$('#accountIcon').on('mouseenter', function() { 
    $('#accountPopup').addClass('hovered'); 
}).on('mouseleave', function() { 
    var target = $('#accountPopup'); 
    if (!target.is(':visible')) { 
     target.removeClass('hovered'); 
    } 
}); 
$('#accountPopup').on('mouseleave', function() { 
    $(this).removeClass('hovered'); 
}); 

Answer 2

var timeout; 
$("#accountIcon").hover(function() { 
    clearTimeout(timeout); 
    $("#accountPopup").delay(500).show(500); 
}, function() { 
    setTimeout(function(){ 
     $("#accountPopup").delay(500).hide(500); 
    },500); 
}); 

if($("#accountPopup").is(':hover')){ 
$("#accountPopup").show(); 
} 

DEMO

我想，这是实现由一个包装DIV

<div class="conatiner"> 
    <div id="accountIcon"></div> 
    <div id="accountPopup"></div> 
</div> 

.conatiner{ 
    overflow:hidden; 
} 


var timeout; 
$(".conatiner").hover(function() { 
    clearTimeout(timeout); 
    $("#accountPopup").delay(500).show(500); 
}, function() { 
    setTimeout(function(){ 
     $("#accountPopup").delay(500).hide(500); 
    },500); 
}); 

DEMO HERE

内你的div的好方法

，并在您使用悬停..你可以使用CSS，能见度和跃迁延迟

<div class="conatiner"> 
    <div id="accountIcon"></div> 
    <div id="accountPopup"></div> 
</div> 


.conatiner:hover #accountPopup{ 
    display: block; 
    -webkit-transition-delay: 1s; /* Safari */ 
    transition-delay: 1s; 
} 

DEMO