JavaScriptの「マウスオーバー」および「マウスアウト」イベントのサポートが必要です

Question

検討 次のコード:

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 一定ではありません（その場で計算する必要があります）。

Answer 1

思いついた このソリューション:

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

Answer 2

試す

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

これは、ユーザーがエリアAの上にマウスを移動すると、エリアBが表示され、マウスがエリアBからマウスを移動すると、エリアAが再シェアであることを意味します。