jQuery - 具有多个 div 的 mouseover/mouseout
Posted
技术标签:
【中文标题】jQuery - 具有多个 div 的 mouseover/mouseout【英文标题】:jQuery - mouseover/mouseout with multiple divs 【发布时间】: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);
);
【问题讨论】:
【参考方案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;
【讨论】:
以上是关于jQuery - 具有多个 div 的 mouseover/mouseout的主要内容,如果未能解决你的问题,请参考以下文章