Maintain Hover / Active over entire parent li element? - html

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>