如何将鼠标悬停在另一个 <div> 上时显示 <div>

Question

我使用了 bootstrap 和 css ，这是我的代码

<div class = "row" id="parent"=>

  <div class="col-md-8" id="ClildDiv1">

  //Some Content

</div>

<div class="col-md-4" id="ChildDiv2" style="display:none">

  //Some Content

<div>

</div>

现在我想将鼠标悬停在 <div class="row Parent> 这种情况下，其所有子项都应该可见 <div class="col-md-4 ChildDiv2">

任何帮助将不胜感激，我只想通过 CSS 样式来实现这一点

Answer 1

您需要同级选择器之一。一般兄弟姐妹~或下一个兄弟姐妹+

.ClildDiv1:hover ~ .ChildDiv2 {
    display: block;
}

请参阅此处的小提琴

或者，任何子 div 的父级悬停将是

.Parent:hover > div {
  display: block;
}