要素のサイズ変更後のjQuery mouseoutイベント

Question

imはショッピングカートウィジェットを作成しようとしています。アイデアはあなたのカートにいくつのアイテムがあるのか​​を表示するボックスで、カートの内容を拡大して詳細を表示します。

私はそれをオープンにすることができましたが、それを閉じたいときに問題が発生します。これはmouseoutイベントで起こるはずですが、正しく動作させることはできません。ここ

は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> 

ので＃カート-開いて、必要なときに表示/非表示のものです。デフォルトで表示があります。どれも相続人の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'); 
    }) 
}); 

ので、問題は、私は#cartボックスをクリックしたとき、それはきれいに開き、＃カートオープンを示したということですが、私は、マウスを移動するときmouseoutイベントは、＃cart-wrapperの古いサイズで起動されます。＃cart-wrapperは、#cartの呼び出しサイズです。ラッパーのサイズがその子によって変更された後にラッパーのサイズを再検証することは可能ですか？ また、ジョブを実行する別の方法があります。 #cartまたは＃cart-openのいずれかからマウスを動かすと、#cartが開いていないことを隠すことができます。

Answer 1

"mouseleave"を試しましたか？

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

私はFirefoxのみでこれをテストしているが、それが働いた：

が、これは試してみてください。私もここに例を追加して遊びたい場合はhttp://jsfiddle.net/cWRWD/2/

希望に役立ちます。