Maintain Hover / Active over entire parent li element?

Question

I want it so that when I hover over a <li> , the entire element has a highlight of blue, and that the text within the <li> turns from black to white. I also want it so that when I click on the <li> , the <li> becomes active and the blue highlight and change from black to white text stays. I understand I have to use the :hover and :active attributes. Here is my attempt therefore:

HTML:

  <div class="facet">
    <ul>
      <li>
        <a href="" class="link">
          Name<span class="count">Count</span>
        </a>
      </li>
    </ul>
  </div>

CSS:

//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;
}

NowI have a variety of issues with my attempt above. 1. When I hover over the <li> , 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 <li> . 2. When I click on the <li> , the element does not apply the active state (which is all white text and blue highlight) to the entire element.

Any ideas on how I can improve? Thanks!

Answer 1

Here's a better version with a lot less CSS: (no solution for the active-bit, but that will have to be solved outside CSS)

 ul { list-style-type: none; } .facet li:hover,.facet li:hover .link,.facet li:hover .count { background-color: #2897C5; color: #FFF; } .link { font-size: 14px; line-height: 1.3; text-decoration: none; display: block; color: #000; padding: .2em; } .count { position: relative; float: right; color: red; } 

  <div class="facet"> <ul> <li> <a href="#" class="link"> Name<span class="count">Count</span> </a> </li> </ul> </div>