7

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

2 回答 2

5

改用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 复制了它的行为。

于 2011-02-11T21:59:44.960 回答
0

这适用于我在 IE 上。希望能帮助到你。

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

使用它作为 CSS。

#topbar {   width: 100%;   height:0px;   background-color: #000; } 
于 2011-02-11T22:42:49.523 回答