Question

我有一个隐藏的div嵌套在一个更大的div中，并将其设置为当鼠标移过较大的div时，隐藏的div向下滑动。在mouseout上，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会复制其行为。

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; }

jQuery - 带有多个div的mouseover / mouseout

2 个答案: