我有一个隐藏的 div 嵌套在一个较大的 div 中,并将其设置为当您将鼠标悬停在较大的 div 上时,隐藏的 div 会向下滑动。在鼠标移出时,div 会向后滑动。问题是,当鼠标经过较小的 div 时,它会尝试将其向上滑动,因为触发了 mouseout 事件。如何防止 div 再次隐藏,直到鼠标悬停在两个 div 上?
html:
<div id="topbarVis" class="col1 spanall height1 wrapper">
<div id="topbar"></div>
</div>
(额外的类是模块化 css 系统的一部分,并定义了 #topbarVis 的宽度和高度等
CSS:
#topbar {
width: 100%;
height: 30px;
margin-top: -25px;
background-color: #000;
}
js:
// On Mouseover -> Show
$("#topbarVis").mouseover(function(){
$("#topbar").animate({marginTop:0}, 300);
});
// On Mouseout -> Hide
$("#topbarVis").mouseout(function(){
$("#topbar").animate({marginTop:-25}, 300);
});