Brauchen Sie Hilfe mit Javascript „Mouseover“ und „mouseout“ Veranstaltungen

Question

der folgende Code :

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

Wie Sie sehen können hier tritt eine gewisse Art von Flimmern, denn wenn .b gezeigt wird, mouseout automatisch tritt ein. Wie würden Sie dieses Problem lösen?

Das gewünschte Verhalten ist: wenn die Maus über .a, sollte .b (.a abdecken soll) dargestellt werden, und wenn die Maus nicht über .a ist, .b sollte nicht gezeigt werden. .a sollte immer angezeigt werden.

Die Lage und Abmessungen von .a nicht konstant ist (sollte im laufenden Betrieb berechnet werden).

Answer 1

ich komme mit dieser Lösung :

$(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

Versuchen

$(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;
    });
});

Dies sollte das bedeuten, wenn sich der Benutzer bewegt thier Maus über den Bereich ein, Bereich b gezeigt wird, und dann, wenn sie thier Maus aus dem Bereich B zu bewegen, Bereich ein reshown ist.