title: Change opacity of span within a on div:hover
body: <p>I would like to change the opacity of a <code>span</code> within an <code>a</code> when the <code>div</code> all of this is within is hovered.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="about"&gt;
    &lt;a style="text-decoration: none;" href="/about"&gt;&lt;h1&gt;ABOUT ME&lt;/h1&gt;&lt;br&gt;&lt;span class="hover-text"&gt;test&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.hover-text {
    opacity: 0;
  }
  
  #about:hover {
    change .hover-text opacity to 1
  }
  </code></pre>
  
  <p>Is this possible to do with pure CSS?</p>