javascript - 下拉 Div 在悬停时保持可见 jQuery

Question

我有一个下拉 div (.drop-down)，它没有显示，但在另一个 div (.nav-divs) 悬停时向下滑动。当我将鼠标悬停在它上面时，我希望能够让 .drop-down 保持可见，但目前它在悬停时闪烁得非常厉害。我确信有一个非常简单的解决方案，但我对 jQuery 还很陌生。将不胜感激。

这是一个fiddle

谢谢!

HTML -

<div id='container'>
<a href=''><div class='nav-divs'>Home

</div></a>
<a href=''><div class='nav-divs'>Products
<div class='drop-down'><ul class="product-list">
    <a href=""><li>Phones</li></a>
    <a href=""><li>Computers</li></a>
    <a href=""><li>Software</li></a>
    <a href=""><li>Hardware</li></a>
</ul></div>
</div></a>
<a href=''><div class='nav-divs'>About

</div></a>
<a href=''><div class='nav-divs'>Contact

</div></a>

CSS -

#container {
        text-align: center;
        height: 30px;
        width: 100%;
        background-color: #2B2B2B;
        position: fixed;

    }

    .nav-divs {
        background-color: #2B2B2B;
        height: 30px;
        width: 100px;
        display: inline-block;
        margin-left: 50px;
        line-height: 30px;
        font-family: Franklin Gothic Medium Cond, Futura BdCn BT, helvitica, arial, sans-serif;
            color: white;
            vertical-align:top;


    }

    .drop-down {
        height: 150px;
        width: 100px;
        background-color: #474747;
        display: none;
        position: absolute;
        text-align: center;

    }   

    .drop-down ul li {
        list-style-type: none;

jQuery-

$('.nav-divs').mouseover(function(){
$(this).find('.drop-down').slideDown(300);

});

$('.nav-divs').mouseout(function(){
$(this).find('.drop-down').slideUp(100);

});

再次感谢!

Answer 1

使用 mouseenter 和 mouseleave jQuery 事件:

$('.nav-divs').mouseenter(function () {
    $(this).find('.drop-down').slideDown(300);
});

$('.nav-divs').mouseleave(function () {
    $(this).find('.drop-down').slideUp(100);
});

jsfiddle demo