JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/11832312/disable-mouseover-event-then-reanable

HTML

<div id="shopping_basket"> shopping basket </div>
<div id="miniBasketDetails"> 
    <span id="miniBasketClose" title="close">X</span>
    mini Basket Details
</div>

CSS

#shopping_basket {
    border: 1px solid green;
}
#miniBasketDetails {
    border: 1px solid blue;
    display: none;
}
#miniBasketClose {
    float:right;
    cursor:pointer;
    color: blue;
}
div {
    width: 100px;
    height: 50px;
    padding: 10px;
    margin: 10px;
}

JavaScript

$("#shopping_basket").hover(function() {
    $("#miniBasketDetails").fadeIn(500);
}, function() {
    $("#miniBasketDetails").data('is_over', false);
    setTimeout(function() {
        if (!$('#miniBasketDetails').data('is_over')) {
            //if not hovered over the basket in 650 miliseconds
            $("#miniBasketDetails").fadeOut(500);
        }
    }, 650);
});

$("#miniBasketDetails").mouseenter(function() {
    $(this).data('is_over', true);
});

$('#miniBasketClose').click(function() {
    $("#miniBasketDetails").fadeOut(500, function() {
        $(this).data('is_over', false);
    });
});