title: Changing font color of <a> contained within <li>, but on hover over <li>
body: <p>I have a <code>&lt;li&gt;</code> that contains an <code>&lt;a href&gt;</code></p>
  
  <pre><code>&lt;li&gt;&lt;a href="http://site.com"&gt;Page&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>I'd like to change the background color and text color of each <code>&lt;li&gt;</code> item as it's hovered over. I found that the background color is best changed by targetting the <code>li:hover</code> and not the <code>a:hover</code> because the <code>a:hover</code> changes the background of only a small portion of the line (the part that has the <code>&lt;a&gt;</code> text).</p>
  
  <pre><code>li:hover { background-color:green; }
  </code></pre>
  
  <p>What I'd also like to do is change the font color (that's the <code>&lt;a&gt;</code>). When I do it the first way below, it has no effect on the <code>&lt;a&gt;</code> text color. And when I do it the second way below, I'd have to hover specifically on the <code>&lt;a&gt;</code> for the font color to change, not just anywhere in the <code>&lt;li&gt;</code> bullet line.</p>
  
  <pre><code>li:hover { background-color:green; color:red; } //first way
  a:hover { color:red; } //second way
  </code></pre>
  
  <p><strong>Is there a way with css to change the font color of the contained <code>&lt;a href&gt;</code> when the <code>&lt;li&gt;</code> is hovered over? again, this is what the html markup looks like:</strong></p>
  
  <pre><code>&lt;li&gt;&lt;a href="http://site.com"&gt;Page&lt;/a&gt;&lt;/li&gt;
  </code></pre>