тайм-аут наведите задержку при наведении на другой 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 элемент.

Затем, на мышах, если целевой элемент (#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

и при использовании парить .. вы можете просто использовать 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