将鼠标悬停在另一个<div>及其子级上时显示div

Question

我有一个HTML div，里面有孩子。我有一个jQuery mouseover事件附加到div。在鼠标悬停时，我显示另一个div，在鼠标输出时，我将其隐藏。

但是，当我将鼠标移到"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>

JS

$("#premiumlink").mouseover(function () {
    $('#demopreview').show(1000);
}).mouseout(function () {
    $('#demopreview').hide(1000);
});

Answer 1

将事件从mouseover更改为mouseenter en mouseout再更改为mouseleave。它们工作得更好，在几乎所有的主流浏览器中都能运行。

MDN Documentation on support

这是你需要的代码：

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

Answer 2

正如Douwe de Haan所说，您应该分别使用mouseenter和mouseleave，而不是mouseover和mouseout。

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

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