События mouseover и mouseout в Javascript

Рассмотрим следующий код:

HTML:

<div class='a'></div>
<div class='b'></div>

CSS:

body {
    position: relative;
}
.a {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: #777;
}
.b {
    position: absolute;
    display: none;
    background: red;
}

JavaScript:

$(function() {
    $('.a').live('mouseover mouseout', function(e) {
        switch (e.type) {
            case 'mouseover': {
                $('.b').offset({'left': $(this).offset().left,
                                'top': $(this).offset().top})
                       .width($(this).outerWidth())
                       .height($(this).outerHeight())
                       .show();
                break;
            }       
            case 'mouseout': {
                $('.b').hide();
                break;
            }        
        }
    });
});

Как вы можете видеть здесь, происходит какое-то мерцание, потому что когда отображается .b, автоматически появляется mouseout. Как бы вы решили эту проблему?

Желаемое поведение: когда мышь находится над .a, должно отображаться .b (должно закрывать .a), а когда мышь не находится над .a, .b не должно отображаться. .a должен отображаться всегда.

Положение и размеры .a непостоянны (должны рассчитываться на лету).