title: How to change body color when hovering over a div
body: <p>I'm currently coding a very basic page for my friend and he said he wanted a box which would change color depending on which link he hovers over. I've tried a few things but none of it seem to work.</p>
  
  <p>This is how the body looks:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    color: #fff;
    background: #98adca;
    text-align: center;
    margin: 275px auto;
  }
  #box {
    padding: 30px;
    border: solid;
  }
  li {
    list-style: none;
    text-decoration: none;
  }
  a,
  a:hover,
  a:active,
  a:visited {
    color: #fff;
    text-decoration: none;
  }
  .twt:hover {
    background: #c3c0d1;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;
    &lt;h1&gt;&lt;a href="{BlogURL}"&gt;social media&lt;/a&gt;&lt;/h1&gt;
    &lt;div class="twt"&gt;
      &lt;li&gt;&lt;a href="#"&gt;twitter&lt;/a&gt;
      &lt;/li&gt;
    &lt;/div&gt;
    &lt;div class="ig1"&gt;
      &lt;li&gt;&lt;a href="#"&gt;art instagram&lt;/a&gt;
      &lt;/li&gt;
    &lt;/div&gt;
    &lt;div class="ig2"&gt;
      &lt;li&gt;&lt;a href="#"&gt;regular instagram&lt;/a&gt;
      &lt;/li&gt;
    &lt;/div&gt;
    &lt;div class="fb"&gt;
      &lt;li&gt;&lt;a href="#"&gt;facebook&lt;/a&gt;
      &lt;/li&gt;
    &lt;/div&gt;
    &lt;div class="yt"&gt;
      &lt;li&gt;&lt;a href="#"&gt;youtube&lt;/a&gt;
      &lt;/li&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I don't get how I should write the CSS to make the box another color when just, for example, hovering over the YouTube link. In my current CSS only the background of the text is changed when hovering and not the entire box.</p>