jQuery mouseout événement après le redimensionnement de l'élément

Question

en essayant de créer un widget de panier. idée est qu'il ya une boîte qui montre combien d'articles vous avez dans votre panier et quand vous cliquez dessus, elle se développe et montre le détail du contenu du panier.

J'ai réussi à le faire ouvrir nicley, mais le problème se produit lorsque je veux le fermer. Cela devrait arriver avec un événement mouseout mais je ne peux pas le faire fonctionner correctement.

ici est le html:

<div id="cart-wrapper" class="clearfix"> 
    <div id="cart"> 
    Cart 0 item(s) <img src="images/arrow-down.png" alt="cart"> 
    </div> 
    <div id="cart-open"> 
    <ul> 
     <li>Morbi</li> 
     <li>Praesen</li> 
     <li>Phasellus</li> 
     <li>Pellentesque</li> 
    </ul> 
    </div> 
</div> 

si panier #-ouvert est celui qui est caché/montré en cas de besoin. et par défaut a display: none appliqué

Heres js:

$(function() { 
    $('#cart').live('click', function(event) { 
     $('#cart-open').css('display', 'block'); 
     $(this).css('border-bottom', 'none'); 
    }); 

    $('#cart-wrapper').live('mouseout', function (event) { 
     $('#cart-open').css('display', 'none'); 
     $('#cart').css('border-bottom', '1px solid #F0F0F0'); 
    }) 
}); 

Le problème est que lorsque je clique sur la case #cart ouvre bien et montre # panier ouvert, mais quand je déplace la souris l'événement mouseout est déclenché sur l'ancienne taille de # cart-wrapper qui était la taille suppliante du #cart. est-il possible de re valider la taille de l'enveloppe après que sa taille a été modifiée par son enfant? Ou peut-être existe-t-il un autre moyen d'accomplir le travail. l'idée est simple: cachez #cart ouvert quand je déplace la souris soit sur #cart ou # cart-open.

Answer 1

Avez-vous essayé "mouseleave" à la place?

Essayez ceci:

$(function() { 
    $("#cart-open").hide(); 
    $("#cart").live("click", function() { 
     $("#cart-open").show(); 
     $(this).css("border-bottom", "none"); 
    }); 

    $("#cart-wrapper").live("mouseleave", function() { 
     $("#cart-open").hide(); 
     $("#cart").css("border-bottom", "1px solid #F0F0F0"); 
    }) 
}); 

J'ai testé ce que sur FireFox, mais cela a fonctionné. J'ai également ajouté un exemple ici si vous voulez jouer http://jsfiddle.net/cWRWD/2/

Espérons que cela aide.