如果孩子不在父母内，则在悬停父母时保持对孩子的悬停效果

Question

我在 jsfiddle 上有一个简单的例子：http://jsfiddle.net/to1hmg1L/

如您所见，当您将鼠标悬停在.parent 上时，.child 将出现。问题是当您将鼠标悬停在.child 上时，它会消失。因为.parent 不是真正的父级（子级不在父级的 div 中）。 当悬停在.parent 和.child 上时，我想保持.child 可见。 我只想创建类似弹出窗口（菜单下拉菜单）的东西。请仅使用 HTML、CSS 和 JS 解决方案。

.parent {
  background-color: #32CD32;
  width: 100px;
  height: 40px;
  display: block;
  
}
.child {
  background: #bada55;
  width: 100px;
  height: 75px;
  display: none;

}
.parent:hover + .child {
  display: block;
}

<div class="parent"></div><div class="child"></div>

Answer 1

您不需要 javascript，您可以通过在 CSS 中添加 , .child:hover 来指定您还希望 .child 在悬停时具有 display:block：

.parent {
  background-color: #32CD32;
  width: 100px;
  height: 40px;
  display: block;
  
}
.child {
  background: #bada55;
  width: 100px;
  height: 75px;
  display: none;

}
.parent:hover + .child, .child:hover {
  display: block;
}

<div class="parent"></div><div class="child"></div>