如何使用悬停显示来自兄弟父级的块

【问题标题】：How to use hover to display the block from sibling parent如何使用悬停显示来自兄弟父级的块
【发布时间】：2021-07-11 05:15:29
【问题描述】：

使用 ScSS，我想显示具有类 parent2 的块，悬停在类名称为父 1 的块的子 1 上。

    <div classname="main">
      <div className="parent1">
    
        <span>    Child 1    </span>
        <span>    Child 2    </span>
        <span>    Child 3    </span>
      </div> 
      <div className="parent2">
    
        <span>        Child 1    </span>
        <span>        Child 2    </span>
        <span>        Child 3    </span>
    </div>
</div>

【问题讨论】：

标签： html css reactjs sass

【解决方案1】：

您必须将父级 2 移动到子级 1 中，这样您就可以通过悬停来触发它，如下所示：

.parent2{
  display: none;
}
.child1:hover .parent2 {
  display: block;
}

<div class="main">
      <div class="parent1">
    
 <div class="child1"> Child 1 
        <div class="parent2">
        <span>        Child 1    </span>
        <span>        Child 2    </span>
        <span>        Child 3    </span>
    </div>
</div>
      </div> 
      </div>
        <span>    Child 2    </span>
        <span>    Child 3    </span>
        </div>
      </div>

【讨论】：

我不想在孩子内部移动父级。有没有其他方法可以在不移动的情况下做到这一点？