timeout hover delay on hover different div

Question

I am trying to make the first square box onhover, then show the bigger box a little bit delay then when I move the mouse hover the big box, the big box still appears.However, my code works incorrectly.

If someone could please help me out? Thanks

Sample 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

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

I think this is a good way to achieve that by wrap your divs inside one 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

and while you use hover .. you can just use css with visibility and transition delay

<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

Answer 2

Try assiging class hovered (check the DEMO):

CSS

.hovered { display:block }

On mouseenter of #accountIcon assign class hovered on #accountPopup element.

Then, on mouseleave, if the target element (#accountPopup) is not visisble, just remove the class.

$('#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');
});