改变角度UI下拉列表中的CSS不起作用

Question

In this plunk我有试图改变在列表中的项目的颜色，当光标位于项目（悬停）

类的角度UI下拉列表

我试着在悬停时为<li>分配一个班级，但它不起作用。无需悬停即可设置课程。

这是尝试：

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

你必须改变<a></a>元素的background-color您的自定义类中。
我叉你plunker

CSS：

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

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

选项，而不添加自定义类。
您可以覆盖.dropdown-menu引导程序类别：

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

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

Answer 2

变化的元素，而不是李。一个把覆盖所有李elemt，让你一悬停，而不是李

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