Question

当你只悬停其直接父div 时，我正试图让div出现。现在，当您悬停该类型的任何div时，div将显示。请参阅此问题的simple example。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

我不能使用JS，你需要改变你的makup，有两种方法可以实现你的目标：

将第一个.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。

Answer 2

您可以使用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

Answer 3

当您hover父元素（即.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>

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;
}

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

4 个答案: