更改 CSS of Angular UI 下拉列表不起作用

Question

In this plunk 我有一个带有 class 的 Angular UI 下拉列表，当光标位于项目（悬停）

我尝试在悬停时将 class 分配给 <li>，但它不起作用。设置 class 不悬停确实有效。

这是尝试：

CSS

li.ddl-li {
  background-color:yellow;   /* works */
}

li.ddl-li:hover {
  background-color:orange;  /* doesn't work */
}

HTML

  <div class="btn-group" uib-dropdown>
    <button id="btn-append-to-body" type="button" class="btn btn-primary" 
           uib-dropdown-toggle="">{{selection}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" ng-click="selectItem($event)" uib-dropdown-menu="" 
            role="menu" aria-labelledby="btn-append-to-body">
       <li role="menuitem" class="ddl-li">
          <a href="#" data-value="1" >The first item</a>
        </li>
        <li role="menuitem" class="ddl-li">
          <a href="#" data-value="2">Another item</a>
        </li>
        <li role="menuitem" class="ddl-li">
          <a href="#" data-value="3">Yet another item</a>
        </li>
    </ul>
  </div>

Answer 1

更改为元素而不是 li。 a 覆盖了所有 li 元素，你 hover a 不是 li

li.ddl-li a:hover {
      background-color:orange;
    }

Answer 2

您必须更改自定义 class 中 <a></a> 元素的 background-color。
我分叉了你的 plunker

CSS:

li.ddl-li a {
  background-color: yellow;
}

li.ddl-li a:hover {
  background-color: orange;
}

不添加自定义的选项class。
您可以覆盖 .dropdown-menu bootstrap class :

ul.dropdown-menu li a {
  background-color: #eee;
}

ul.dropdown-menu li a:hover {
  background-color: #bbb;
}

更改 CSS of Angular UI 下拉列表不起作用

Changing CSS of Angular UI dropdown list doesn't work

angularjs

angular-ui

angular-ui-bootstrap