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样式＆＃34; highlightRow＆＃34;位于＆＃34;下拉菜单＆＃34;的单独样式表中。样式

＆＃34;的样式表突出显示了＃34;

.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*/
}