title: How to change span style while hovering a div?
body: <p>I'm trying to change the style of a span while hovering on a div, and this div on hover should also change its color.</p>
  
  <p>This is my code so far (the bg of div changes, but the color of span doesn't, why?):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;HOME&lt;/title&gt;
      &lt;style type="text/css"&gt;
          div{
              width: 200px;
              height: 200px;
              background-color: red;
          }
          div:hover{
              background-color: blue;
          }
          span{
              color: blue;
          }
          div:hover span{
              color: green;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div&gt;&lt;/div&gt;
  &lt;span&gt;WHY&lt;/span&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be really appreciated.</p>