I made a little jsfiddle to show how I would solve this. If you mouseover the button, the cart shows up. If you mouseout the button, the cart hides. But if you move over to the cart, it stays visible, until you move out from it.
Basically, the hideCart
is delayed with 500ms. If any bound element receives a mouseover during this time, it cancels the timer.
The code:
var hideTimer;
function showCart() {
$("#mini-cart").fadeIn(1000);
if (hideTimer) {
window.clearTimeout(hideTimer);
hideTimer = null;
}
}
function hideCart() {
hideTimer = window.setTimeout(function () {
$("#mini-cart").fadeOut(1000);
}, 500);
}
$("#nav-cart,#mini-cart").hover(showCart, hideCart);