title: Change text and link-color inside list-element on hover
body: <p>I've got an ordered list like this</p>
  
  <pre><code>&lt;ol class="tracklist"&gt;
      &lt;li&gt;
          &lt;a href="www.html"&gt;LINK&lt;/a&gt;
          &lt;span&gt;some text&lt;/span&gt;
       &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>I want to change the color of the list-numbers, link and span upon hovering on the list element.</p>
  
  <p>Therefore I have this in css:</p>
  
  <pre><code>ol.tracklist li:hover {
      background-color: #D21600;
      color: #FFFFFF;
  }
  </code></pre>
  
  <p>It only changes the list-numbers and span's color though.</p>
  
  <p>What can I do about this (without using JS).</p>