html - 仅在直接父级悬停时显示 div

Question

我试图让一个 div 在您只悬停它的直接父 div 时出现。现在，当您将鼠标悬停在该类型的任何 div 上时，div 就会显示出来。看这个simple example的问题。

如何让 .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

如果不能更改标记，则无法定位第一个菜单项并在悬停子 .widget 时隐藏它。您将需要使用 JS。

如果你不会使用 JS，你需要改变你的结构，有两种方法可以达到你的目的:

将第一个 .menu 放在子 .widget 之后，这样您就可以使用 .widget:hover > .widget:hover + .menu< 来定位它 悬停子部件时的选择器:

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

<div class="widget">
  <div class="widget">
    <div class="menu"><p>I should ONLY be visible when you hover the small inner widget</p></div>
  </div>
  <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>

第二种方法是让子 .widget 成为第一个的兄弟:

.wrap {
  position: relative;
  width: 500px;
  height: 500px;
}
.widget {
  position: absolute;
  background-color: #ddd;
}
.w1 {
  width: 500px;
  height: 500px;
  background-color: #eee;
}
.w2 {
  left: 200px;
  top: 200px;
  width: 150px;
  height: 150px;
}
.menu {
  background-color: #444;
  display: flex;
  position: absolute;
  top: 0;
  display: none;
}
.widget:hover > .menu {
  display: flex;
}
.widget:hover > .widget:hover + .menu {
  display: none;
}

<div class="wrap">
  <div class="widget w1">
    <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>
  <div class="widget w2">
    <div class="menu"><p>I should ONLY be visible when you hover the small inner widget</p></div>
  </div>
</div>

附带说明一下，您应该尽量不要使用内联 CSS。