为什么我在悬停项目时无法更改下拉菜单颜色?

时间:2016-03-01 21:07:51

标签: javascript jquery css twitter-bootstrap drop-down-menu

当我将Twitter引导程序下拉菜单项悬停到蓝色(#428bca)时,我正在尝试更改颜色,但我无法做到。它仍然得到白色背景。我做错了什么?

<div class="form-group">

  <div class="input-group">
    <div class="input-group-btn">

      <div id="filter_search" class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          <span data-bind="label" id="searchLabel"> <span class="glyphicon glyphicon-filter"></span></span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a class="enabled" id="filter_a">Search by A</a></li>
          <li><a class="enabled" id="filter_b">Search by B</a></li>
          <li><a class="enabled" id="filter_c">Search by C</a></li>
          <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">Search by D</a>
                            <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="#">Search by E</a></li>

                                <li><a href="#">Search by F</a></li>
                            </ul>
                        </li>
        </ul>

      </div>
    </div>
  </div>
</div>


<div class="form-group">
  <input id="search" size="30" placeholder="Search here..." maxlength="50" class="form-control" type="text" />
</div>

<span class="input-group-btn">
        <button id="submit" class="btn btn-success" type="submit" value="id">Search! <span class="glyphicon glyphicon-search"></span></button>

</span>

在我的CSS中我尝试

 .input-group .btn-group-primary .dropdown-menu {
  background-color: #fff !important;
  }

.btn-group-primary .dropdown-menu li > a:hover,
.btn-group-primary .dropdown-menu li > a:focus {
  background-color: #428bca !important;
}

代码:https://jsfiddle.net/gheleri/mL2btnws/15/

1 个答案:

答案 0 :(得分:0)

我不是CSS专家,但是: 尝试设置background-image属性而不是颜色:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


      <div class="container" ng-app="todo">
        <div class="row">
          <div class="col-lg-12" id="task_list" ng-controller="option_list">
            <table class="table">
              <tbody>
                <tr ng-repeat="user in users">
                  <td>{{user.name}}</td>
                  <td>
                    <select class="form-control" ng-model="selected.group" ng-options="group as group.name for group in groups"></select>
                  </td>
                </tr>
              </tbody>
            </table>


          </div>
        </div>
      </div>

你可以清理它(即删除渐变等),但你明白了。