Javascript 显示<；部门>；当悬停在另一个div及其子对象上时

我有一个HTML div，里面有孩子。 我有一个jQuery mouseover事件附加到该div。mouseover时，我显示另一个div，mouseout时，我隐藏它

然而，当我将鼠标移到“premiumlink”div上时，一切都很好，但是当我将鼠标移到div的子级上时，有条件显示的div会隐藏，但是jQuery发现父div仍然悬停在上面，所以它会再次显示它。然后，如果我将光标移回父div，该div将被隐藏，然后再次显示

我怎样才能让mouseover和mouseout适用于所有儿童，而不是这种神经质的状态

这是我的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>

---

将事件从mouseover更改为

mouseenter

en

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
}

正如杜威·德哈恩所说，你应该分别使用

mouseenter

和

mouseleave

而不是

mouseover

和

mouseout

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

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

---

你要的是mouseenter，mouseleave。你甚至不需要JavaScript，普通的CSS就可以做到

#premiumlink:hover#demopreview{display:block}#demopreview{display:none；}

为什么不使用？（恰好与mouseenter和mouseleave绑定）。

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

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