仅在直接父母的悬停时显示div

Question

当你只悬停它的直接父div时,我试图让div出现.现在,当您悬停该类型的任何div时,div将显示.看到这个简单的问题示例.

.menu当鼠标直接悬停在该div上时(而不是它的子div),如何才能显示div？

.widget {
  width: 150px;
  height: 150px;
  background-color: #ddd;
  position: relative;
}
.menu {
  background-color: #444;
  display: flex;
  position: absolute;
  top: 0;
  display: none;
}
.widget:hover > .menu {
  display: flex;
}

<div class="widget" style="width: 500px; height: 500px; background-color: #eee;">
  <div class="menu">
    <p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p>
  </div>
  <div class="widget" style="left: 200px; top: 200px;">
    <div class="menu">
      <p>I should ONLY be visible when you hover the small inner widget</p>
    </div>

  </div>
</div>

Answer 1

为此，您可以使用 jquery。使用stopPropogation()事件处理程序。可能有直接 css 的方法，但我不知道。这是我用过的并且效果很好

$("div.widget").mouseover(
        function(e) {
            e.stopPropagation();
            $(this).children(".menu").css("display", "flex");
        }).mouseout(
        function() {
            $(this).children(".menu").css("display", "none");
        });

JSFIDDLE