CSS：根据另一种样式更改悬停颜色

Question

情况：我们有一个角结构，它在 UL 中构建一系列 LI 项，设置为使用 css 来模拟下拉列表。

 <ul class="dropdown-menu" id="ddl_suppliersList">
      <li ng-click="clearSuppliersList()">
           <input type="checkbox" class="form-control input-sm" /><label>Unselect All</label>
      </li>
      <li ng-repeat="supplier in suppliers track by $index" ng-class="{highlightedRow: supplier.isSelected}" ng-click="supplierSelected($index)">
                                <input type="checkbox" class="form-control input-sm" /><label ng-class="{highlightedRow: supplier.isSelected}">{{supplier.supplierPreferredName}}</label>
      </li>
  </ul>

样式表：

.dropdown-menu > li > label {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > label:hover,
.dropdown-menu > li > label:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.dropdown-menu > li > input:checked ~ label,
.dropdown-menu > li > input:checked ~ label:hover,
.dropdown-menu > li > input:checked ~ label:focus,
.dropdown-menu > .active > label,
.dropdown-menu > .active > label:hover,
.dropdown-menu > .active > label:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #428bca;
}

（我认为这是相关的部分）

显示如下：

用户可以选择许多项目 - CSS 样式“highlightedRow”位于与“下拉菜单”样式不同的样式表中

“highlightedRow”的样式表

.highlightedRow {
  background-color: #0D82F5;
  color: white;
}

问题是，选择了第二家公司，但悬停样式完全隐藏了它。

这让用户感到困惑。

我相信一个解决方案是，如果已选择的选项的悬停颜色可以更改为其他颜色以指示下方的项目已被选中。但我不知道如何构建它。

我怀疑我可以像这样为 LI 项目添加另一种样式：

<input type="checkbox" class="form-control input-sm" /><label ng-class="{highlightedRow: supplier.isSelected; hoverAlt: supplier.isSelected}">{{supplier.supplierPreferredName}}</label>

但我无法准确确定该调用它的名称以及放置它的位置，以便它覆盖现有的悬停颜色。

想法？

Answer 1

只需将悬停事件添加到所选行

添加这个：

.highlightedRow:hover {
  background-color: #3c8ddd; /*Any color you want on the hover*/
}