Javascript CSS：根据其他样式更改悬停颜色

情况：我们有一个角度结构，在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>

我认为这是相关的一点

它显示为：

用户可以选择许多项-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>

但我还不能确定它的确切名称，以及放置位置，以便它覆盖现有的悬停颜色

想法？

只需将悬停事件添加到所选行即可 添加以下内容：

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

---

这听起来确实可行，但悬停在下拉列表中仍然优先。如果我注释掉上面的行。下拉菜单>li>标签：悬停，新的悬停颜色就会出现。我试着改变页面中样式表的呈现顺序，只是为了看看它是否有影响——但没有。如果你所做的一切都没有帮助，那么一个快速的解决方案就是使用背景色：3c8ddd！重要的但请记住，这并不是最好的做法。宾果！我认为有一个输入错误——进一步的研究表明，应该是感叹号而不是冒号，但它起作用了。有关该工具的更多详细信息-

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