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

【问题标题】：Display <div> when hovering over another div and its children将鼠标悬停在另一个 div 及其子项上时显示 <div>
【发布时间】：2020-05-07 12:53:01
【问题描述】：

我有一个 HTML div，里面有孩子。我有一个附加到 div 的 jQuery mouseover 事件。鼠标悬停时，我显示另一个 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>

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

【问题讨论】：

你想要鼠标进入，鼠标离开。你甚至不需要 JavaScript，普通的旧 CSS 就可以做到。 #premiumlink:hover #demopreview { display: block } #demopreview { display: none; }
为什么不使用jQuery's hover event？（恰好绑定到 mouseenter 和 mouseleave）。

标签： javascript jquery

【解决方案1】：

将您的事件从鼠标悬停更改为mouseenter 以及将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
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：