Поддерживать Hover/Active над всем родительским элементом li?

Question

Я хочу, чтобы при наведении курсора на <li> весь элемент имел выделение синего цвета и что текст в пределах <li> превращается из черного в белый. Я также хочу, чтобы, когда я нажимаю на <li>, активируется <li>, а синий цвет выделяется и меняется от черного до белого текста. Я понимаю, что я должен использовать атрибуты :hover и :active. Вот моя попытка поэтому:

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 имеет целый ряд вопросов с моей попыткой выше. 1. Когда я нависаю над <li>, вся вещь становится синей, что здорово, и текст «Название» также становится белым. Тем не менее, текст «Count» становится только белым, когда у меня есть наведение мыши над этой частью <li>. 2. Когда я нажимаю на <li>, элемент не применяет активное состояние (все это белый текст и синяя подсветка) ко всему элементу.

Любые идеи о том, как я могу улучшить? Благодаря!

Answer 1

Вот лучшая версия с намного меньшим CSS: (нет решения для активных немного, но это должно быть решено за пределами 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>