jQuery - 具有多个 div 的鼠标悬停/鼠标悬停

Question

我有一个隐藏的 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);
});

Answer 1

使用mouseenter/mouseleave代替:

$("#topbarVis").mouseenter(function(){
  $("#topbar").animate({marginTop:0}, 300);
})
 .mouseleave(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

...或者只使用hover()^(docs)方法，这是 mouseenter/mouseleave 的快捷方式:

$("#topbarVis").hover(function(){
  $("#topbar").animate({marginTop:0}, 300);
},function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

原因是 mouseover/mouseout 的本质是冒泡。因此，当该元素的任何后代获得事件时，它将触发。而 mouseenter/mouseleave 则不会冒泡。

唯一实际上支持非标准mouseenter/mouseleave事件的浏览器是IE，但jQuery复制了它的行为。