我有一个下拉 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);
});
再次感谢!
最佳答案
使用 mouseenter
和 mouseleave
jQuery 事件:
$('.nav-divs').mouseenter(function () {
$(this).find('.drop-down').slideDown(300);
});
$('.nav-divs').mouseleave(function () {
$(this).find('.drop-down').slideUp(100);
});
关于javascript - 下拉 Div 在悬停时保持可见 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25213080/