title: How to set both a background colour and a different text color on the same element
body: <p>I have an un-ordered list with link tags inside and I would like to change the color of the background and the text when the list is hovered by the users mouse.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt;text&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;text&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;text&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>li:hover {
      background-color: #60266f;
          }
  </code></pre>
  
  <p>I can't seem to work out how to apply a text color to the li tags as well as a background color.</p>
  
  <p>Can anyone explain where I may be going wrong?</p>