How to implement a nested hover with jQuery?
<p>my website: <a href="http://modernego.info" rel="nofollow">http://modernego.info</a></p>

<p>I have an <code>&lt;a&gt;</code> element named <code>#btn-cart</code>. When offered, it drops down and shows a div named <code>.block-cart</code>. So this is how I want it to go:</p>

<p>If hovered on <code>#btn-cart</code> set <code>.block-cart</code> to <code>display:block;</code><br>
If hover out on <code>#btn-cart</code> set <code>.block-cart</code> to<code>display:none;</code></p>

<p>If hovered on <code>#btn-cart</code> set <code>.block-cart</code> to <code>display:block;</code><br>
and then hovered onto <code>.block-cart</code> ignore the mouseleave on <code>#btn-cart</code>.</p>

<p>I got that working with the code below; however, when I set <code>$('.block-cart').fadeOut(200)</code>, the <code>.block-cart</code> is set to <code>display:none</code> even if I hover on it.</p>

<p>Also, I am using <code>.live</code> because this cart is run through Ajax and without it the jQuery doesn't work after the Ajax call. Is there a better way?</p>

<pre><code>jQuery(function($) {
    $('#btn-cart').live('mouseenter', function() {
        $('.block-cart').css('display','block');                
    });
    //----------------------------------------------            
    $('.block-cart').live('mouseenter', function() {
        var close = false;
        $('.block-cart').css('display','block');    
    });
    //----------------------------------------------
    $('.block-cart').live('mouseleave', function() {
        close = false;
        $('.block-cart').fadeOut(200);   
    }); 
    //----------------------------------------------

    if (close != false) {   
        $('#btn-cart').live('mouseleave', function() {  
            $('.block-cart').fadeOut(200);
        });
    }

});

        &lt;li class="hover hover-cart-sidebar"&gt;
                &lt;a href="http://modernego.info/checkout/cart/" class="btn-cart hover-cart" id="btn-cart" title="Cart"&gt;

                        &lt;span class="quantity"&gt;0&lt;/span&gt;

                &lt;/a&gt;    
                &lt;div class="block block-cart"&gt;
    &lt;div class="block-title"&gt;
    &lt;strong&gt;&lt;span&gt;My Cart&lt;/span&gt;&lt;/strong&gt;
&lt;/div&gt;
&lt;div class="block-content"&gt;
                        &lt;p class="empty"&gt;Add something to your cart.&lt;/p&gt;


        &lt;/div&gt;
</code></pre>

<p>
                </li></p>
