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

Why I Can't change the dropdown menu color when hover an item?

本文关键字：颜色 下拉菜单 鼠标 悬停 项目 为什么      更新时间：2023-09-26

当我将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/

我不是 CSS 专家，但是：尝试设置背景图像属性而不是颜色：

.btn-group-primary .dropdown-menu li > a:hover,
.btn-group-primary .dropdown-menu li > a:focus {
     background-image: -webkit-gradient(linear,left top,left bottom,from(#428bca),to(#428bca));
}

你可以清理它（即删除渐变等），但你明白了。

相关文章：