仅在直接父元素悬停时显示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>

- sazr

---

我认为这在纯CSS中不可能。你可能需要查看JavaScript并监听mouseover/enter事件。 - Luuuud

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。

- web-tiki

Answer 2

你可以使用jquery来实现这个功能，使用stopPropagation()事件处理程序。也许有一种直接使用CSS的方法，但我不清楚。这是我使用的方法，效果很好。

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

{{link1：JSFIDDLE}}

（注：本文为编程相关内容）

- Shubham Khatri

Answer 3

当你将鼠标悬停在父元素即 .widget 上时，你希望 .menu 可见。你可以使用 nth-child 来定位指定的子元素。

请尝试以下操作。

.widget:nth-child(1):hover > .widget:nth-child(2) > .menu{
  background:orange;
  display:flex;
}

.widget {
  width: 150px;
  height: 150px;
  background-color: #ddd;
  position: relative;
}
.menu {
  background-color: #444;
  display: flex;
  position: absolute;
  top: 0;
  display: none;
}
.widget:nth-child(1):hover > .widget:nth-child(2) > .menu{
  background:orange;
  display:flex;
}

<div class="widget" style="width: 500px; height: 500px;background:#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>

如果你想让 .menu 在鼠标悬停时出现，那么你需要改变它的属性，即删除 display:none; 并设置 opacity:0.01。

.widget:nth-child(1) > .menu:hover{
  opacity:1;
}
.widget:nth-child(2) > .menu:hover{
  opacity:1;
} 

.widget {
  width: 150px;
  height: 150px;
  background-color: #ddd;
  position: relative;
}
.menu {
  background-color: #444;
  display: flex;
  position: absolute;
  top: 0;
  opacity:0.01;
}
.widget:nth-child(1) > .menu:hover{
  opacity:1;
}
.widget:nth-child(2) > .menu:hover{
  opacity:1;
}

<div class="widget" style="width: 500px; height: 500px;background:#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>

- frnt

Answer 4

如果您想按照自己的方式进行操作，那么您可以按照以下方式编辑您的CSS。

.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;
}
.widget:hover > .widget > .menu{
  display: block;
}

- user6327513