title: Change background based on different hovered element
body: <p>When hovering on each circle at the corner, background color in the main area should be changed so matches the color of the circle, and there is an adequate paragraph showing at the same time.</p>
  
  <p>I have tried transition, opacity... but couldn't get it work.</p>
  
  <p>Note, HTML has to be untouched.</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>* {
    margin: 0;
    padding: 0;
  }
  
  body {
    position: relative;
    height: 100vh;
    text-align: center;
  }
  
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  .bg {
    position: relative;
    height: 100vh;
    background-color: #333;
  }
  
  .circle {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: white solid 2px;
    z-index: 1;
  }
  
  .red.circle {
    position: absolute;
    top: 10%;
    left: 10%;
    background-color: red;
  }
  
  .green.circle {
    position: absolute;
    top: 10%;
    right: 10%;
    background-color: green;
  }
  
  .blue.circle {
    position: absolute;
    bottom: 10%;
    left: 10%;
    background-color: blue;
  }
  
  .orange.circle {
    position: absolute;
    bottom: 10%;
    right: 10%;
    background-color: orange;
  }
  
  p.red {
    display: none;
    background-color: red;
    line-height: 100vh;
  }
  
  p.green {
    display: none;
    background-color: green;
    line-height: 100vh;
  }
  
  p.blue {
    display: none;
    background-color: blue;
    line-height: 100vh;
  }
  
  p.orange {
    display: none;
    background-color: orange;
    line-height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="red circle"&gt;&lt;/div&gt;
  &lt;div class="green circle"&gt;&lt;/div&gt;
  &lt;div class="blue circle"&gt;&lt;/div&gt;
  &lt;div class="orange circle"&gt;&lt;/div&gt;
  &lt;div class="bg"&gt;
    &lt;p class="red"&gt;Czerwony&lt;/p&gt;
    &lt;p class="green"&gt;Zielony&lt;/p&gt;
    &lt;p class="blue"&gt;Niebieski&lt;/p&gt;
    &lt;p class="orange"&gt;Pomarańczowy&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>