I have a shopping basket on my website, and I want to display a list of products when a user hovers over the basket icon. However, I am facing an issue where the list disappears as soon as the mouse leaves the basket logo. Is there a way to keep the list visible until the mouse moves out of the listbox? Below is the code snippet I'm using:
<div id="basket" style="padding:10px; background-color:#00458b;color:white;position:relative;cursor:pointer; width: 130px;z-index:1000;">Basket</div>
<div id="list" style="padding:10px; background-color:#63a0df;color:white;position:relative; width: 200px; display: none;z-index:1100;" >
<ul id="products">
</ul>
<button type="button" class="unset">Destroy</button>
</div>
$('#basket').bind({
mouseenter: function() {
$("#list").fadeIn("slow", function() {
});
},
mouseleave: function() {
$("#list").fadeOut('fast');
}
});