Maintain Hover / Active over entire parent li element?
<p>I want it so that when I hover over a <code>&lt;li&gt;</code>, the entire element has a highlight of blue, and that the text within the <code>&lt;li&gt;</code> turns from black to white. I also want it so that when I click on the <code>&lt;li&gt;</code>, the <code>&lt;li&gt;</code> becomes active and the blue highlight and change from black to white text stays. I understand I have to use the <code>:hover</code> and <code>:active</code> attributes. Here is my attempt therefore:</p>

<p>HTML:</p>

<pre><code>  &lt;div class="facet"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="" class="link"&gt;
          Name&lt;span class="count"&gt;Count&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>//Changes the LINK text to white
.link:hover {
    background-color: #2897C5;
    color: #ffffff;
}

//Attempt to change the entire parent element text to white and have a blue highlight, but this doesn't seem to work
.facet li:active {
    background-color: #2897C5;
    color: #ffffff;
}

//Normal CSS for the link when it is not hovered over or clicked on
.link {
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    display: block;
    color: #000;
}

//White text when you hover over the count
.count:hover {
    color: #ffffff;
}

//Normal CSS when you don't hover over the count
.count {
    position: relative;
    float: right;
    color: #bdbdbd;
}
</code></pre>

<p>NowI have a variety of issues with my attempt above. 
1. When I hover over the <code>&lt;li&gt;</code>, the entire thing turns blue which is great, and the "Name" text also turns white. However, the "Count" text only turns white when I have my mouse hover over that portion of the <code>&lt;li&gt;</code>.
2. When I click on the <code>&lt;li&gt;</code>, the element does not apply the active state (which is all white text and blue highlight) to the entire element. </p>

<p>Any ideas on how I can improve? Thanks!</p>