在悬停列出的项目时设置下拉按钮的颜色答案

【问题标题】：Set the colour of the dropdown button while hovering its listed items在悬停列出的项目时设置下拉按钮的颜色
【发布时间】：2017-03-23 23:53:07
【问题描述】：

我制作了以下下拉按钮 (JSBin)。目前，当下拉列表打开时，当我将鼠标悬停在列出的项目上时，按钮本身的颜色会变为深蓝色。我不希望这种情况发生；我希望它改变颜色为#1abc9c。有谁知道怎么做？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>    
    .rb .btn.btn-primary {
        background-color: #1abc9c;
        border-color: white
    }

    .rb .btn.btn-primary:hover {
        background-color: #2fe2bf;
    }

    .rb .btn.btn-primary:focus {
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .rb .btn.btn-primary:active {
        border-color: white;
        background-color: #1abc9c;
    }

    .rb .dropdown-toggle  {
        border-color: white !important;
    }
  </style>
</head>
<body>
  <div class="rb">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      </button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
    </div>
  </div>
</body>
</html>

编辑 1： 我有更好的版本 here。现在，当按下上方的normal 按钮时，我们看到颜色变为略深的蓝色，当我们松开按下时，颜色又变为更亮的蓝色。我想对下拉按钮有同样的效果：即按下按钮 ==> 稍微深一点的蓝色 ==> 松开按钮 ==> 一个更亮的蓝色并显示下拉列表 ==> 按下按钮 == > 稍微深一点的蓝色 ==> 松开按钮 ==> 一个更亮的蓝色，下拉列表被隐藏。

有谁知道这是否可行？

【问题讨论】：

您希望它保持相同的颜色直到用户再次点击它？
请在 OP 末尾查看我的最后一次编辑...
是的，有可能。就像我给出的第一个答案一样，您需要使用开发工具检查按钮的状态，并在要更改颜色的每个状态下对其进行编辑-如果您希望有人为您做这件事，请提供报酬。
很难检查被被按下的按钮的状态...
只有 4 种潜在状态 - 活动、焦点、悬停和已访问。您可以排除悬停，因为悬停不包括被按下的按钮，您也可以排除已访问，因为该按钮不是已访问的链接。所以你有两个潜在的状态。强制每个按钮的状态，并修改css样式，直到你得到你想要的。

标签： css drop-down-menu

【解决方案1】：

请试试这个，希望对你有帮助。

.rb .dropdown:active .btn-primary:active {
    background-color: #1abc9c !important;
}

【讨论】：

是的，它有效...JSBin

【解决方案2】：

使用chrome开发者工具你可以隔离你想要改变的DOM元素的状态，在本例中是

.open>.dropdown-toggle.btn-primary:focus {
      background-color: #1abc9c;
}

在你的 css 中尝试一下，你可以看到它的工作原理

【讨论】：

【解决方案3】：

这很正常，因为您使用的是 Bootstrap。当一个按钮获得焦点时，Bootstrap 添加这条规则：background-color: #204d74;

所以你需要在.btn-primary 上添加一个background-color:#1abc9c，当它是:focus 时：

.rb .btn.btn-primary:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color:#1abc9c;
}

【讨论】：