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

Question

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

标签： htmlcssreactjssass

Answer 1

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

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