jQuery - 具有多个 div 的 mouseover/mouseout答案

【问题标题】：jQuery - mouseover/mouseout with multiple divsjQuery - 具有多个 div 的 mouseover/mouseout
【发布时间】：2011-06-25 20:38:37
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-animate mouseover mouseout

【解决方案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复制了它的行为。

【讨论】：

这里有什么区别？ mouseenter / mouseleave 我也有同样的行为
@jAndy：你不应该有这种行为。 mosueenter/mouseleave 应该只针对它实际附加的元素触发。不是它的后代。
@jAndy：Here's an example。当您将鼠标悬停在外部方块时，该事件会触发。但不是在内。 If you switch it 到 mouseover/mouseout，它也会在内部触发。
@jAndy：不，只是从后代到具有处理程序的元素的常规冒泡。这似乎有点奇怪，因为当您悬停内部方块时，它首先会触发mouseout，因为您在技术上离开外部方块。也就是说，您将留下未被其后代遮挡的部分。 IE mouseenter/mouseleave 系统似乎更有意义，但它不是规范的一部分。 :o(

【解决方案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; }

【讨论】：