Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您不需要使用javascript，您可以通过将.child添加到您的CSS来指定您还希望display:block拥有, .child:hover：< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: