显示<div>当悬停在另一个div及其子代上时,显示<div>。

问题描述 投票:1回答:2

我有一个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);
});
javascript jquery
2个回答
1
投票

把鼠标移到事件改为 mouseentermouseoutmouseleave. 这些工作方式更好,几乎所有的主流浏览器。

MDN支持文档

这是你需要的代码。

$("#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
}

0
投票

Douwe de Haan 说,你应该用 mouseentermouseleave 而不是 mouseovermouseout 分别是:

$('#premiumlink').on('mouseenter', function(e) {
    $('#demopreview').show(100);
});

$('#premiumlink').on('mouseleave', function(e) {
    $('#demopreview').hide(100);
});
© www.soinside.com 2019 - 2024. All rights reserved.