Question

I have a quick basket; a checkout box div that appears when you hover the basket link. I want the basket it to appear only on hovering over the link and it will disappear when the user moves away from the link.

The box should also stay still if the user is inside the main div and only slideout onmouseout too.

Pains me to post this I cannot get it and been at it for sometime..

jQuery

// Toggle the Quick Cart (uses Load Balance for higher TPS no que!)
$('#show-quick-cart').hover(function () {        
    $('#quickcart').slideDown(500);
    return false;
});
$('#quickcart').mouseleave(function () {        
    $(this).slideUp(500);
    return false;
});

HTML5

<a id="show-quick-cart" href="#show-quick-cart">MY BAG</a>
<div id="show-quick-cart-zone">
    <div id="quickcart" class="quickcart hide">
        <div class="quickcarttitle"><span>SHOPPING BAG</span></div>
        <div class="quickcart-products">
            <p><strong>No items in your cart so far</strong></p>
            <a href="/cart?ref=quick-cart"><img src="//gc-cdn.com/cart/securecheckout.png"></a>
        </div>
    </div>
</div>

Demo

Live Demo (page)

http://tinyurl.com/bwn33op

The actual jQuery

http://tinyurl.com/cz6kl66

jsFiddle

jsFiddle.

Answer 1

DEMO on JSFiddle

HTML

<div id="pardiv">
<a id="show-quick-cart" href="#show-quick-cart">MY BAG</a>
<div id="show-quick-cart-zone">
    <div id="quickcart" class="quickcart hide">
        <div class="quickcarttitle"><span>SHOPPING BAG</span></div>
        <div class="quickcart-products">
            <p><strong>No items in your cart so far</strong></p>
            <a href="/cart?ref=quick-cart"><img src="//gc-cdn.com/cart/securecheckout.png"></a>
        </div>
    </div>
</div>
</div>​

Jquery

$('#show-quick-cart').mouseenter(function () {        
    $('#quickcart').slideDown(500);
    return false;
});
$('#pardiv').mouseleave(function () {        

    $('#quickcart').slideUp(500);
    return false;
});

​