1

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;
}
4

0 に答える 0