在整个父 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;
}

现在我在上面的尝试中遇到了各种问题。 1. 当我将鼠标悬停在<li> 上时，整个东西变成了蓝色，这很棒，“名称”文本也变成了白色。但是，只有当我将鼠标悬停在<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>