javascript - jQuery:当 div 1 上的鼠标输入结束时显示 div 2

Question

我有一个购物篮，当我将鼠标悬停在购物篮符号上时，我想显示一个产品列表。但是当我用鼠标离开篮子 Logo 时，将鼠标移动到列表中，列表就消失了(合乎逻辑)。但是我该怎么做才能使列表仍然显示并且仅在我将鼠标移出列表框时才消失？这是我的代码:

<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');
        }
    });

Answer 1

将您的 block 包装到公共(public) div 中，这样 #list 仍然可见，直到您离开该公共(public) div

试试这个

<div id="basket" >
<div 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;" >
</div>

DEMO