jQuery - 使用多个div实现mouseover/mouseout效果

Question

我有一个嵌套在较大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);
});

- We're All Scholars

Answer 1

请使用 mouseenter/mouseleave 替代：

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

...或者直接使用hover()^(文档)方法，这是mouseenter/mouseleave的快捷方式：

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

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

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

- user113716

---

这里有什么区别吗？我使用 mouseenter / mouseleave 得到了相同的行为。 - jAndy

@jAndy：你不应该得到那种行为。mosueenter/mouseleave只应该对实际附加它的元素触发，而不是它的后代元素。 - user113716

@jAndy：这里有一个例子。当你将鼠标悬停在外部正方形上时，事件会触发。但不会在内部触发。如果你将它切换到mouseover/mouseout，它也会在内部触发。 - user113716

@jAndy：不是的，这只是从子元素冒泡到具有处理程序的元素。看起来有点奇怪，因为当你将鼠标悬停在内部正方形上时，它首先会触发 mouseout，因为你从技术上讲是离开了外部正方形。也就是说，你正在离开其未被后代遮盖的部分。IE 的 mouseenter/mouseleave 系统似乎更有意义，但它不是规范的一部分。 :o( - user113716

Answer 2

这对我在IE上有效。希望能有所帮助。

$("#topbarVis").hover(function(){   $("#topbar").animate({height:"100%"}, 300); },function(){   $("#topbar").animate({height:"0%"}, 300); }); 

将此作为CSS使用。

#topbar {   width: 100%;   height:0px;   background-color: #000; } 

- Matthew Davis