title: CSS hover doesn't work
body: <p>I'm quite new to HTML and CSS and I know this is probably a very dumb question but I've been trying to solve it for a while and I can't figure out what's wrong. </p>
  
  <p>I want one div to change its backgound-color when the mouse enters another element not related to it (when the div is the child of the other component it works fine). </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav&gt;
  
      &lt;/nav&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>* {
      margin: 0px;
      padding: 0px;
  }
  
  nav {
      width: 100%;
      height: 50px;
      background-color: black;
  }
  
  div {
      width: 100%;
      height: 40px;
      background-color: green;
      position: absolute;
      left: 500px;
  }
  
   nav:hover div {
      background-color: blue;
  }
  </code></pre>
  
  <p>I've tried changing the "nav:hover div" rule for something like "nav:hover body > div" but it doesn't work either... </p>
  
  <p>Thank you in advance for your help. </p>