下拉 div 在悬停 jQuery 上保持可见答案

【问题标题】：Drop Down Div Stay Visible on Hover jQuery下拉 div 在悬停 jQuery 上保持可见
【发布时间】：2014-10-02 11:58:36
【问题描述】：

我有一个下拉 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);

});

再次感谢！

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案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

【讨论】：

【解决方案2】：

为此，您不一定需要 javascript。您还可以使用 CSS 使用类 display:none 和 class:hover display:block/inline-block 等。然后你可以合并 webkit-transition 和其他东西来平滑它。

【讨论】：