Besoin d'aide avec Javascript "mouseover" et événements "mouseout"

Question

Tenir compte the following 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; 
      }   
     } 
    }); 
}); 

Comme vous pouvez voir here, une sorte de scintillement se produit, car lorsque .b est affiché, mouseout se produit automatiquement. Comment résoudrais-tu ce problème ?

Le comportement souhaité est le suivant: lorsque la souris est sur .a, .b doit être représenté (devrait couvrir .a), et lorsque la souris ne survole pas .a, .b ne doivent pas être affichés. .a doit toujours être affiché.

La position et les dimensions de .a ne sont pas constantes (elles doivent être calculées à la volée).

Answer 1

Je viens avec this solution:

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

Essayez

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

Cela devrait signifier que lorsque l'utilisateur déplace Thier la souris sur la zone a, zone b est montrée et puis quand ils se déplacent Thier souris hors de la zone b, la zone a est représentée.