title: SCSS: On hover div, show another div
body: <p>I'm trying to show the elements in another div when hovering over a div. This is what I have now, and it's not working. Currently, it just doesn't do anything on hover, it is just non-responsive. Any tips would be greatly appreciated. I am not using any other languages such as JQuery. Thank you!</p>
  
  <p><strong>HTML/React</strong></p>
  
  <pre><code>&lt;div className="parent"&gt;
      &lt;div className="show-me"&gt;
          &lt;Element /&gt;
      &lt;/div&gt;
      &lt;div className="hover-me"&gt;
          &lt;span&gt;hi&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS:</strong> </p>
  
  <pre><code>.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;
       }
  }
  </code></pre>
  
  <p>The below answer works, but I could not get it to work with the element I have inside show-me.
  <a href="https://i.stack.imgur.com/1pdjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1pdjs.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/0pyNT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0pyNT.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/3Rjh4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Rjh4.png" alt="enter image description here"></a></p>