Div鼠标触发Mouseout和Mousemove事件

Question

我正在尝试使用鼠标跟随鼠标，但只有当鼠标位于另一个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;
}