title: Need help understanding CSS combinators
body: <p>Found this guide (<a href="https://www.w3schools.com/howto/howto_css_display_element_hover.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_display_element_hover.asp</a>) and I'm trying to see how to use it so that hover over one div can affect another.</p>
  <p>I created this codepen: <a href="https://codepen.io/thewizck/pen/PoRyWRy" rel="nofollow noreferrer">https://codepen.io/thewizck/pen/PoRyWRy</a></p>
  <pre><code>&lt;style&gt;
  .hide {
  opacity: 0;
  }
  .myBPbtn {
  color: #000000;
  }
  .myBPbtn:hover + .hide {
  opacity: 1;
  color: red;
  }
  .myBPpin:hover + .myBPbtn {
  color: red !important;
  }
  &lt;/style&gt;
  &lt;div class=&quot;myBPbtn&quot;&gt;Hover over me.&lt;/div&gt;
  &lt;div class=&quot;hide&quot;&gt;I am shown when someone hovers over the div above.&lt;/div&gt;
  &lt;div class=&quot;myBPpin&quot;&gt;I want to change the color of the &quot;Hover over me.&quot; text when someone hovers over me.&lt;/div&gt;
  </code></pre>
  <p>My question, why isn't the first line changing to red when the last line is hovered on?</p>