Question

In this plunk我有一个Angular 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

更改为元素而不是li。 a覆盖所有li elemt，所以你徘徊一个，而不是li

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

Answer 2

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

<强> CSS：

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

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

选项无需添加自定义类。
您可以覆盖.dropdown-menu bootstrap类：

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

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

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

2 个答案: