我有一个HTML div,里面有子代,我在div上附加了一个jQuery mouseover事件。当鼠标移动时,我显示另一个div,当鼠标移出时,我隐藏它。
但是当我把鼠标移到 "premiumlink "div上时,一切都很好,但是当我把鼠标移到div的子节点上时,被条件显示的div会隐藏起来,但是jQuery发现父节点仍然被悬停,所以它又显示出来。然后,如果我把光标移回父 div,该 div 被隐藏,然后又显示出来。
怎样才能让鼠标移动和鼠标移出适用于所有的子代,而不是这种跳跃性的状态?
以下是我的HTML
<div class="platinumlevel" id="premiumlink">
<h1>
<img src="~/Content/Images/colorworld.png" alt="Logo" class="eventimage" />
<a href="@Url.Action("Exhibitor1Attendee", "Home")" class="landing">Company Name</a>
</h1>
<div id="demopreview" style="display: none;">
I should be displayed when "premiumlink" and all it's children are mouseovered
</div>
</div>
JS
$("#premiumlink").mouseover(function () {
$('#demopreview').show(1000);
}).mouseout(function () {
$('#demopreview').hide(1000);
});
把鼠标移到事件改为 mouseenter
褝 mouseout
到 mouseleave
. 这些工作方式更好,几乎所有的主流浏览器。
这是你需要的代码。
$("#premiumlink").mouseenter(function () {
$('#demopreview').show(1000);
}).mouseleave(function () {
$('#demopreview').hide(1000);
});
如果你不想使用JavaScript和jQuery,同样也可以用CSS来完成。
#demopreview {
display: block
transition: all 1s linear;
}
#premiumlink:hover #demopreview {
display: block
}
如 Douwe de Haan 说,你应该用 mouseenter
和 mouseleave
而不是 mouseover
和 mouseout
分别是:
$('#premiumlink').on('mouseenter', function(e) {
$('#demopreview').show(100);
});
$('#premiumlink').on('mouseleave', function(e) {
$('#demopreview').hide(100);
});