如何切換div a和b之間的b顯示狀態？

Question

如何切換div「b」，在div「a」和「b」之間顯示狀態？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     // how can i do this in js ? 
     // mouse over a , b displays 
     // mouse out a , not over b ,2seconds b hide 
     // mouse out a , over b , b don't hide 
     // mouse out b , not over a, b, 2seconds b hide 
    }); 
</script> 
<style type="text/css"> 
    *{margin:0;padding:0} 
    .page{padding:60px;} 
    .a{background-color:tan;width:50px;height:50px;color:#fff} 
    .b{background-color:#9E0606;width:100px;height:100px;color:#fff} 
</style> 
<div class="page"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
</div> 

Answer 1

試試這個

var tOut; 
$('.a,.b').hover(function() { 
    $('.b').show(); 
    clearTimeout(tOut); 
}, function() { 
    tOut = setTimeout(function() { 
     $('.b').hide(); 
    }, 2000); 
}); 

DEMO

Answer 2

var onOut; 
$('.a').hover(function() { 
    $('.b').show(); 
    clearTimeout(onOut); 
}, function() { 
    onOut = setTimeout(function() { 
     $('.b').hide(); 
    }, 2000); 
});