jquery - Div 跟随鼠标触发 Mouseout 和 Mousemove 事件

Question

我试图让一个 div 跟随鼠标，但只有当鼠标在另一个 div 内时。我已经取得了一些进展，但是当鼠标后面的 div 显示出来时，mouseout会触发事件，导致它再次消失。然后，该mousemove事件导致它出现并在无限循环中重复。如何避免这个循环？

HTML

<div class="navbar" rel="#box1">Link</div>
<div class="box" id="box1" align="center"></div>

Javascript

$(document).ready(function(){
    $(".navbar").mousemove(function(e){         
        $($(this).attr('rel')).show();       
        $(".box").css({             
            top: -80 + "px",             
            left: (e.pageX - 300) + "px"        
        });    
    });     
    $(".navbar").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});​

CSS

.navbar{
width: 90%;
height: 200px;
border: 1px solid #f00;
margin: 50px auto 0 auto;
display: block;
}
.box{
    width: 616px;
    height: 474px;
    background: url(http://i.imgur.com/4fV4o.png);
    float: left;
    vertical-align: top;
    display: none;
    position: absolute;
}