如何在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);
});