SCSS：在悬停div上，显示另一个div

Question

当我将鼠标悬停在div上时，我试图显示另一个div中的元素。这就是我现在所拥有的，并且不起作用。当前，它在悬停时什么也没做，只是没有响应。任何提示将非常感谢。我没有使用任何其他语言，例如JQuery。谢谢！

HTML / React

<div className="parent">
    <div className="show-me">
        <Element />
    </div>
    <div className="hover-me">
        <span>hi</span>
    </div>
</div>

SCSS：

.parent {
    .hover-me {
        @include icon('help', inherit);
        color: $b500-blue;

        span {
            font-weight: 700;
        }
    }

    .show-me {
        .show-me-body {
            opacity: 0;

        }
     }

     .hover-me:hover ~ .show-me .show-me-body {
         opacity: 1;
     }
}

以下答案有效，但是我无法使其与show-me中包含的元素一起使用。

Answer 1

按如下所示更改HTML，它将起作用。 .hover-me应该先于.show-me。

~ Selector: .hover-me ~ .show-me选择器匹配出现在.show-me之后的.hover-me。

 <div className="parent">
      <div className="hover-me">
           <span>hi</span>
       </div>
       <div className="show-me">
           <Element />
       </div>

  </div>

工作片段

/*COMPILED CSS*/

.parent .hover-me {
  color: red;
}
.parent .hover-me span {
  font-weight: 700;
}
.parent .show-me .show-me-body {
  opacity: 0;
}
.parent .hover-me:hover ~ .show-me .show-me-body {
  opacity: 1;
}

      <div class="parent">
            
            <div class="hover-me">
                <span>hi</span>
            </div>
        <div class="show-me">
              <div class="show-me-body">Hellow</div>
            </div>
        </div>