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

Answer 2

为此你不一定需要javascript。您还可以使用CSS类中的display：none和class：hover display：block / inline-block等。然后，您可以将webkit转换和内容结合起来以使其平滑。

下载Div在Hover jQuery上可见

2 个答案: